引入jQuery和jquery-validate
https://jqueryvalidation.org/
jquery-validate表单校验插件是基于jQuery的，所以在引入的时候，也必须引入jQuery。
可以将js文件下载到本地引用，也可以直接引用cdn上的资源。例如，引用cdn的资源，在html文件中添加：
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
校验规则举例
jquery-validate有内置的校验规则，如果不符合自己的需求，可以自定义校验规则。
- required: 表示是否必填，例如required: true
- rangelength：长度范围，参数是一个数组[minlength, maxlength]:，例如rangelength: [5, 8]
- equalTo：要求元素与另一个相同，参数值是一个选择器，例如
equalTo: '#psw'表示跟id是psw元素的值相同 - range：值范围，参数是一个数组[min, max]，例如range: [18, 70]
- digits：整数，例如digits: true
- dateISO：校验符合ISO日期标准，例如dateISO: true
- email：邮件地址，例如email: true
点击提交，触发校验规则：
输入合法的值以后，校验通过：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单校验页面</title>
<style>
table {
margin: 0 auto;
border: 0;
}
.error {
color: red;
}
</style>
</head>
<body>
<form name="empForm" id="empForm" method="post" action="test.html">
<table border="1">
<tr>
<td>登录名</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="psw" name="psw" /></td>
</tr>
<tr>
<td>重复密码:</td>
<td><input type="password" id="psw2" name="psw2" /></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender" /> 男
<input type="radio" id="gender_female" value="f" name="gender" /> 女
<!--
不满足校验规则,表单校验插件,会自定义一个lable标签,里边显示就是错误信息
如果定义的lable标签的位置不符合我们的要求,就需要我们自己在指定位置定义一个lable标签
让标签开始的时候处于隐藏状态
for="gender":通过name的属性值gender找到要校验的标签
generated="true":写上,那么就会自动在messages中获取错误提示信息
不写,就默认使用lable标签中的错误信息
-->
<label for="gender" generated="true" class="error" style="display: none;">性别(必选其一)2</label>
</td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>学历:</td>
<td> <select name="edu" id="edu">
<option value="">－请选择你的学历－</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
</select>
</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="text" id="birthday" name="birthday" value="" /></td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1" /> 乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" /> 足球
<label class="error" for="checkbox1" style="display: none;">请至少选择一个爱好</label>
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td align="left">身份证(15-18):</td>
<td><input type="text" id="cart" name="cart" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="firstname" id="firstname" value="提交">
</td>
</tr>
</table>
</form>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
/*
* 自定义校验规则：写在页面加载事件的里面，validate函数的外面
* 格式：
* $.validator.addMethod('校验规则名称', function(value, element, params){})
* 校验规则名称: cartlength
* function:
* value:input标签的value属性值;文本输入框就是用户在页面输入的内容
* element:input标签对象
* params:自定义规则传递的参数,可以传递多个参数,使用一个数组来接收[15, 18]
*/
$.validator.addMethod('cartlength', function (value, element, params) {
// alert(value)
// alert(element)
// alert(params)
// 判断用户在页面中输入的内容value是否为15位或18位
if (value.length !== params[0] && value.length !== params[1]) {
return false
}
return true
})
/*
* 定义身份证长度是15位，必须全是数字的校验规则
*/
$.validator.addMethod('cart15', function (value, element, params) {
// 定义正则表达式
const reg = /^[0-9]{15}$/
if (value.length === 15) {
// 满足正则表达式的规则就放行
// 不满足正则表达式的规则就阻止提交服务器，显示错误信息
return reg.test(value)
}
// 不是15位，继续校验18位的身份证号，放行
return true
})
/*
* 定义身份证长度是18位，必须全是数字，最后一位可以是x的校验规则
*/
$.validator.addMethod('cart18', function (value, element, params) {
// 定义正则表达式
const reg = /^[0-9]{17}[0-9x]$/
if (value.length === 18) {
return reg.test(value)
}
// 不是18位，继续校验，放行
return true
})
$('#empForm').validate({
rules: {
// rules中的key对应表单元素name属性的值
username: {
required: true,
rangelength: [5, 8]
},
psw: {
required: true,
rangelength: [6, 12]
},
psw2: {
required: true,
rangelength: [6, 12],
equalTo: '#psw'
},
gender: 'required',
age: {
required: true,
range: [18, 70],
digits: true
},
edu: 'required',
birthday: {
required: true,
dateISO: true,
},
checkbox1: 'required',
email: {
required: true,
email: true
},
cart: {
// 身份证必填
required: true,
// 长度是15位或18位
cartlength: [15, 18],
// 长度是15位，必须全是数字
cart15: true,
// 长度是18位，必须全是数字，最后一位可以是x
cart18: true
}
},
messages: {
// 跟rules中的对应
username: {
required: '登录名不能为空',
rangelength: '登录名的长度应该在5-8个字符之间'
},
psw: {
required: '密码不能为空',
rangelength: '密码长度6-12位字符或数字'
},
psw2: {
required: '重复密码不能为空',
rangelength: '重复密码长度6-12位字符或数字',
equalTo: '重复密码必须和密码一致'
},
gender: '性别(必选其一)',
age: {
required: '年龄不能为空',
range: '年龄的范围在18~70之间',
digits: '年龄必须是整数'
},
edu: '学历必须选择一个学历，不能是请选择',
birthday: {
required: '出生日期必填',
dateISO: '必须符合日期格式yyyy-MM-dd',
date: '日期必须合法'
},
checkbox1: '兴趣爱好至少选择一个',
email: {
required: '电子邮箱必须填写',
email: '必须满足邮箱格式'
},
cart: {
// 身份证必填
required: '身份证必填',
cartlength: '身份证号只能是15位或18位',
// 长度是15位，必须全是数字
cart15: '长度是15位,必须全是数字',
// 长度是18位，必须全是数字，最后一位可以是x
cart18: '长度是18位,必须全是数字,最后一位可以是x'
}
}
})
</script>
</body>
</html>
