vaildate 插件对表单输入进行验证
程序员文章站
2023-12-21 16:24:04
...
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" id="myname">
<table>
<tr>
<td>姓名：</td>
<td><input name="name1"type="text"></td>
</tr>
<tr>
<td>年龄：</td>
<td ><input name="age" type="text"></td>
</tr>
<tr>
<td>账号：</td>
<td><input name="zhanghao" id=type="text"></td>
</tr>
<tr>
<td>手机：</td>
<td><input name="phone" type="text"></td>
</tr>
<tr>
<td>电话：</td>
<td><input name="tel" type="text"></td>
</tr>
<tr>
<td>身份证：</td>
<td><input name="idcard" type="text"></td>
</tr>
<tr>
<td>类型</td>
<td><select name="ch" id="ss">
<option value="1">1</option>
<option value="2">2</option>
</select></td>
<td>必须选择一项</td>
</tr>
<tr><td><input type="submit" value="提交"></td></tr>
</table>
</form>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="voild.js"></script>
</html>
js 代码
```javascript
$(
function ()
{
//自定义正则表达式规则
$.validator.addMethod("checkusername",function (value,element) {
var regname=/^\D\W$/;
return this.optional(element)||(regname.test(value));
},"只能是汉字")
$.validator.addMethod("checkerage",function (value,element) {
var regage=/^\d{1,2}\.\d{1,2}$/;
return this.optional(element)||(regage.test(value));
},"内容输入错误，或者格式错误：整数位最多两位，小数位最多两位")
$.validator.addMethod("checkphone",function (value,element) {
var regphone=/^1\d{10}$/;
return this.optional(element)||(regphone.test(value));
},"手机号码格式错误");
$.validator.addMethod("checktel",function (value,element) {
var regtel=/^[0-9]{6}$/;
this.optional(element)||(regtel.test(value))
},"电话格式错误")
$.validator.addMethod("checkid",function (value,element) {
var regid=/^\d{10,}$/;
this.optional(element)||(regid.test(value));
},"身份证必须大于10位")
$("#myname").validate
(
{
rules:
{
name1:
{
required:true,
//自定义正则表达式
checkusername:true
},
age:
{
required:true,
checkerage:true,
},
zhanghao:
{
required:true
},
phone:
{
required:true,
checkphone:true,
},
tel:
{
required:true,
checktel:true
},
idcard:
{
required:true,
checkid:true,
}
},
messages:
{
name1:
{
required:"请输入用户名"
},
age:
{
required:"请输入年龄"
},
zhanghao:
{
required:"请填写账号"
},
phone:
{
required:"请填写手机号码"
},
tel:
{
required:"请填写电话"
},
idcard:
{
required:"请填写身份证"
}
},
}
)
}
)