共计 4215 个字符，预计需要花费 11 分钟才能阅读完成。
引入 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>
$.validator.addMethod('cartlength', function (value, element, params) {
if (value.length !== params[0] && value.length !== params[1]) {
return false
}
return true
})
$.validator.addMethod('cart15', function (value, element, params) {
const reg = /^[0-9]{15}$/
if (value.length === 15) {
return reg.test(value)
}
return true
})
$.validator.addMethod('cart18', function (value, element, params) {
const reg = /^[0-9]{17}[0-9x]$/
if (value.length === 18) {
return reg.test(value)
}
return true
})
$('#empForm').validate({
rules: {
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,
cartlength: [15, 18],
cart15: true,
cart18: true
}
},
messages: {
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 位',
cart15: '长度是 15 位,必须全是数字',
cart18: '长度是 18 位,必须全是数字 , 最后一位可以是 x'
}
}
})
/script>
/body>
/html>
原文地址: jquery-validate 表单校验插件
正文完
