参数校验（一）——前端校验
-
- 1.validate简介
- 2.基本用法
- 3.自定义校验方法
- 4.常见问题
-
- 4.1 更改error信息位置
- 4.2 级联校验
- 4.3 对checkbox、radio、select标签的验证
- 4.4 正则表达式
-
1.validate简介
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。
2.基本用法
$().ready(function() {
//addModal前端校验
$("#addForm").validate({
//定义error出现的位置。（注：可选）
errorPlacement : function(error, element) {
if(element.is(":radio")){
error.appendTo(element.parent().parent());
}else {
error.appendTo(element.parent());//其他元素为默认，必须写
}
},
//定义addForm表单校验规则
rules: {
add_api_name: {
required: true,
maxlength: 100,
groupNameFormat:true, //apiName和groupName的规则一样（注：自定义）
remote:{
type: "POST",
url: "/manager/api/isNameNotExist",
data: { //要传递的数据：userGroupId、apiName
userGroupId: function () {
return $("#add_user_group_name").val();
},
apiName: function () {
return $("#add_api_name").val();
}
}
}
},
......
},
//error信息
messages: {
add_api_name: {
required: ' × API名称不能为空! ',
maxlength: ' × 长度不超过100字符! ',
groupNameFormat: ' × API名称必须由字母或数字构成! ',
remote: ' × API名称已被使用，请重新输入! '
},
......
},
//验证通过，提交
submitHandler: function () {
addSubmit(); //自定义的表单提交的方法
}
});
} 3.自定义校验方法
3.1 格式：addMethod（name, method, message）
//判断appName是否符合规范
jQuery.validator.addMethod(
"appNameFormat",
function (value, element) {
return this.optional(element) || /^[0-9a-zA-Z]+_[0-9a-zA-Z]+_[0-9a-zA-Z]+$/.test(value);
},
"应用名称必须由字母、数字、_构成，名称规范：{公司}_{部门|组}_{项目名称}"
);3.2 自定义方法写在哪里？
建议不要在jquery.validate.js文件中添加，创建一个新的文件jquery.validate.extend.js来扩展jQuery Validate的验证方法。
3.3 使用
同其他校验规则的使用方法一样，如2中的groupNameFormat就是一个自定义的校验规则。
4.常见问题
4.1 更改error信息位置
4.1.1 解决方法：errorPlacement，见2的示例；
4.1.2 参考资料：https://blog.csdn.net/baifenbaizhenxin/article/details/79599439.
4.2 级联校验
4.2.1 解决方法：先调用removeData方法清理缓存，再触发该元素的校验事件；
4.2.2 示例
$("#add_api_name").removeData('previousValue');
if ($("#add_api_name").val() != '') {
addValidator.element($("#add_api_name"));
}4.2.3 参考资料：《Jquery Validate根据其他元素的事件来触发单个元素的异步校验》.
4.3 对checkbox、radio、select标签的验证
参考资料：https://blog.csdn.net/qq_29763707/article/details/52486152.
4.4 正则表达式
4.4.1 语法：http://www.runoob.com/regexp/regexp-syntax.html；
4.4.2 测试工具：https://c.runoob.com/front-end/854.