Jquery.validate1.19 demo

最新推荐文章于 2022-11-27 20:12:49 发布

等一场春雨

最新推荐文章于 2022-11-27 20:12:49 发布

阅读量407

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/WithCYwind/article/details/102661902

版权

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述
视频地址

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);
                    }
                });
            }
        });

在这里插入图片描述

等一场春雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Jquery.validate1.19 demo

视频地址demo<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form id="data-fo...
复制链接

扫一扫