JQuery Validate （表单验证）

~~JQuery Validate~~

下面展示一些我的test代码。

// html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"
        src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script type="text/javascript" src="jquery-validation-1.19.2/dist/jquery.validate.js"></script>
    <!--引入中文提示包，注意顺序-->
    <script type="text/javascript" src="jquery-validation-1.19.2/src/localization/messages_zh.js"></script>
</head>

<body>
    <form action="#" id="userForm" method="post">
        用户名：<input type="text" name="name" id="name" required max="150">
        <br>是否必填：<input type="checkbox" name="flag" id="flag">
        密码：<input type="password" name="pwd" id="pwd">
        <br><input type="submit" value="提交">
        错误将在这显示：<span id="errorSpan"></span>
    </form>
</body>

</html>

// js
 <script>
        /*可以设置 validate 的默认值,覆盖验证规则  注意位置*/
        $.validator.methods.email = function (value, element) {
    
    
            return this.optional(element) || /[a-z]+@[a-z]+\.[a-z]+/.test(value);
        }
        $.validator.setDefaults({
    
    
            submitHandler: function (form) {
    
     alert("提交事件!"); form.submit(); }
        });

        var $userForm = $("#userForm");
        $userForm.validate({
    
    
            // 设置里debug参数，即使验证通过了（为 true）也不会提交表单。
            debug: false,
            errorPlacement: function (error, element) {
    
    
                //error.appendTo(element.parent());//这是默认的，就像前几个图显示的，直接追加到该控件的后面
                error.appendTo($("#errorSpan"))
            },
            rules: {
    
    
                name: {
    
    
                    required: function () {
    
    
                        return $("#flag").prop("checked");
                    },
                    max: 150
                },
                pwd: {
    
    
                    required: "请输入密码",
                    minlength: 5,
                }
            },
            /*将校验规则写到 js 代码中，没写显示默认的*/
            messages: {
    
    
                password: {
    
    
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字符"
                },
                // confirm_password: {
    
    
                //     required: "请输入密码",
                //     minlength: "密码长度不能小于 5 个字符",
                //     equalTo: "两次密码输入不一致"
                // },s
            },
            submitHandler:function(form){
    
    
            alert("提交事件!");   
            form.submit();
        }    
        });

    </script>

参考链接: https://blog.csdn.net/wangxiaoan1234/article/details/77466720

JQuery Validate（表单验证）

JQuery Validate （表单验证）

猜你喜欢