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验证。

jquery validate使用