jquery validate使用
Jquery validator (jquery的数据验证库)
建议:自己记录的。如果学习请参考:https://blog.csdn.net/wangxiaoan1234/article/details/77466720
引入js库
- jquery.js
- jquery.validate.js 核心库
- jquery.validate.method.js 这个js里面封装了很多的校验方法。
- jquery.validate.css 校验的样式
使用
将规则写到控件中
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8"/>
<title>DEMO</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- jquery -->
<script src="./jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="./query.validate.js" type="text/javascript"></script>
<script src="./jquery.validate.method.js" type="text/javascript"></script>
<link href=./jquery.validate.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<form>
<input type="text" id="field" name="field" requird maxlength=50 minlength=10 />
<input type="text" id="field" name="field" class="{required:true,minlength:5,equalTo:'#password'}" />
<input type="submit" value="提交">
</form>
</body>
</html>
将判断规则写到js中
$(document).ready(function () {
$("#inputForm").validate({
debug: true, //debug为true,不提交
ignore: ‘’, //校验隐藏域
rules: {
function: {
required: true,
maxlength: 10
}
}
});
});
修改错误信息的显示位置
<form action="#" id="userForm" method="post">
用户名:<input type="text" name="name" id="name" autocomplete="off">
<br>是否必填:<input type="checkbox" name="flag" id="flag">
<br><input type="submit" value="提交">
<br>
错误将在这显示:<span id="errorSpan"></span>
</form>
<script>
$(function () {
var $userForm = $("#userForm");
$userForm.validate({
debug: true,
errorPlacement: function(error, element) {
// error.appendTo(element.parent());//这是默认的,就像前几个图显示的,直接追加到该控件的后面
error.appendTo($("#errorSpan"))
},
rules: {
name: {
required: true
}
}
});
})
</script>
来自https://blog.csdn.net/wangxiaoan1234/article/details/77466720.
API
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
errorClass | String | 指定错误提示的 css 类名,可以自定义错误提示的样式。 | “error” |
errorElement | String | 用什么标签标记错误,默认是 label,可以改成 em。 | “label” |
errorContainer | Selector | 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。 errorContainer: “#messageBox1, #messageBox2” | |
errorLabelContainer | Selector | 把错误信息统一放在一个容器里面。 | |
wrapper | String | 用什么标签再把上边的 errorELement 包起来。 |
| 原文:https://blog.csdn.net/wangxiaoan1234/article/details/77466720
使用自定义判断方式
$.validator.addMethod("checkHidden", function (value, ele, param) {
return !checkEmpty($("#" + param).val());
}, "字段值不能为空");
Q$A
不使用submit方式提交的表单怎么办?
在提交之间使用$("#SubmitForm").valid(),可以判断校验通没通过.
判断隐藏域的值
$('#inputForm').validate({
ignore: [],
// any other options and/or rules
});
原来js中的ignore的默认值是ingore:‘hidden’,这个地方就是把默认值覆盖掉。
参考文章
https://blog.csdn.net/wangxiaoan1234/article/details/77466720
日后学习
- jquery validate的细节。
- bootstrap validate验证。
最后
如果你觉得写的还不错,就关注下公众号呗,关注后,有点小礼物回赠给你。
你可以获得5000+电子书,java,springCloud,adroid,python等各种视频教程,IT类经典书籍,各种软件的安装及破解教程。
希望一块学习,一块进步!