Validate表单验证一篇博客学会使用
程序员文章站
2022-05-10 18:59:32
...
一，validate插件校验表单。
首先validate是别人在jquery的基础上封装好的第三方工具。
- 1.导入jquery.js和validate.js
- 2.在加载页面成功后，对表单进行校验
- 3.在validate中编写校验规则
- 4.样式：
$("选择器").validate({
rules:{},
messages:{}
});二，格式和使用
-rules格式
- 格式一：
字段的name属性:”校验器”
- 格式2:
字段的name属性:{
校验器:值,
校验器:值
}
- 案例：
username:"required",
password:{
required:true,
digits:true
},
repassword:{
equalTo:"[name='password']"
},
zuixiaozhi:{
min:5
},
shuzhiqujian:{
range:[5,10]
}messages的格式:
-格式1:
字段的name属性:”提示信息”
-格式2:
字段的name属性:{校验器:”提示信息”,校验器:提示信息”}
例如:
username:"用户名不能为空",
password:{
required:"密码不能为空",
digits:"密码只能是数字"
},
repassword:{
equalTo:"两次输入的内容不一致"
},
zuixiaozhi:{
min:"最小值应该大于{0}"
},
shuzhiqujian:{
range:"输入的范围在{0}~{1}之间"
}常见的校验规则如下：
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错，慎用
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10案例和使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/messages_zh.js"></script>
<script type="text/javascript">
$(function(){
$("#formid").validate({
rules:{
username:"required",
password:{
rangelength:[5,11],
required:true
},
repassword:{
equalTo:"[name='password']",
required:true
},
email:"email",
sex:{
required:true
}
},
messages:{
username:"一定要写值呀",
password:{
rangelength:"范围在{0}~{1}之间哦",
required:"必须填写"
},
repassword:{
equalTo:"两次都要一样哦",
required:"一定啊哟写哦"
},
}
})
})
</script>
</head>
<style>
</style>
<body>
<form action="#" method="get" id="formid">
<table width="60%" height="60%" align="center" bgcolor="#ffffff">
<tr>
<td colspan="3">会员注册USER REGISTER</td>
</tr>
<tr>
<td width="20%">用户名:</td>
<td width="80%"><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repassword" id="repassword"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女" />女
<!--下面这句话可以让输出提示写在性别后面不当主人哦-->
<label for="sex" class="error"></label>
<!--<label for="sex" class="error"></label>-->
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="checkcode">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>如图所示：
上一篇： Termux使用教程
推荐阅读