Jquery.validate1.19 demo

视频地址

demo

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form id="data-form">
    <p id="info"></p>
    <label>用户名：</label>
    <input id="username" name="username" type="text">
    <input id="password" name="password" type="text">
    <input name="confirm-password" type="text">
    <input id="check" type="button" value="check">
    <input type="submit" value="submit">
</form>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!--表单验证-->
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/additional-methods.min.js"></script>
<!--表单中文提示-->
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/localization/messages_zh.min.js"></script>
<script>
    $(function () {


        //检查元素和值是否有效
        $("#check").click(function () {
            console.log($("#data-form").valid());
        });

		/**
         * 验证是否是有效的手机号
         */
        $.validator.addMethod("isPhone", function (value, element) {
            let tel = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
            return tel.test(value) || this.optional(element);
        }, "请输入正确的手机号码");
        
/**
         * 请输入正确的车牌号
         */
        $.validator.addMethod("isCarNumber",function (v,e) {
            let express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
            return express.test(v);
        },"请输入正确的车牌号");
        
        /**
         * 验证是否是汉字
         */
        $.validator.addMethod("isChineseCharacter", function (value, element) {
            var tel = /^[\u4e00-\u9fa5]+$/;
            return this.optional(element) || (tel.test(value));
        }, "请输入汉字");


        //开启表单验证
        let validator = $("#data-form").validate({
                debug: true,//开启调式，不会提交
                rules: {
                    username: {
                        required: true//必填
                        , min: 20//大于等于2的值
                        , max: 4000//小于等于4的值
                        // , minlength: 2//最小两个字符
                        // , maxlength: 4//最大4个字符
                        , rangelength: [2, 10]//2到10的字符

                        // ,remote:{
                        //     url:"api/...",//请求地址
                        //     type:"post",//请求类型
                        //     data:{
                        //     }
                        // }
                    },
                    password: {
                        required: true
                    },
                    "confirm-password": {
                        required: true,
                        equalTo: "#password"//比较两次密码是否相同
                    }
                }, errorPlacement: function (error, element) {
                    error.insertBefore("#info");
                }
            })
        ;
        console.log($("#username").rules());//获取效验规则
        $("#username").rules("add", {digits: true});//添加
        console.log($("#username").rules());//获取效验规则
        $("#username").rules("remove", "min");//删除
        console.log($("#username").rules());//获取效验规则

        console.log(validator.form());//
        console.log(validator.element("#username"));//
        console.log(validator.resetForm());//
        validator.showErrors({
            username: "你填错了"
        });

    });
</script>
</body>
</html>

//表单验证
        $("#data-form").validate({
            rules: {
                ownerName: {required: true, rangelength: [2, 4], isChineseCharacter: true},
                contactNumber: {required: true, isPhone: true},
                vcode: {required: true, isVcode: true},
                numberPlate: {required: true, isCarNumber: true},
                // registerTime: {required: true},
            }, submitHandler: function () {
                let ownerName = $("#ownerName").val();
                let contactNumber = $("#contactNumber").val();
                let numberPlate = $("#numberPlate").val();
                let brandModelNumber = $("#brandModelNumber").val();
                let engineNumber = $("#engineNumber").val();
                let vehiceIdentificationCode = $("#vehiceIdentificationCode").val();
                let registerTime = $("#registerTime").val();
                let lssuingCertificate = $("#lssuingCertificate").val();
                let natureOfUse = $("#natureOfUse").val();
                let vehicleType = $("#vehicleType").val();
                let userId = $("#userId").val();

                $.ajax({
                    url: "http://xxxxxx:8081/clcs-app/api/my/myCarOwnerCertification",
                    type: "post",
                    data: {
                        "ownerName": ownerName,
                        "contactNumber": contactNumber,
                        "numberPlate": numberPlate,
                        "brandModelNumber": brandModelNumber,
                        "engineNumber": engineNumber,
                        "vehiceIdentificationCode": vehiceIdentificationCode,
                        "registerTime": registerTime,
                        "lssuingCertificate": lssuingCertificate,
                        "natureOfUse": natureOfUse,
                        "vehicleType": vehicleType,
                        "userId": userId,
                        "isDefault": 1
                    },
                    dataType: "json",
                    success: function (res, msg) {

                        window.location.href = "[[@{wx_message?msg='提交成功！'}]]";
                    },
                    error: function (msg, e) {
                        alert(msg);
                    }
                });
            }
        });