jquery中的表单验证validate

最新推荐文章于 2020-06-01 23:05:49 发布

小龙爷ღ

最新推荐文章于 2020-06-01 23:05:49 发布

阅读量185

点赞数

分类专栏： JQuery 文章标签： js jquery validate表单验证 jquery中的validate

本文链接：https://blog.csdn.net/qq_45086879/article/details/100067899

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

①首先引入validate.js放在jquery.js后面

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.validate.regex.js"></script>

②常用校验规则：

required:true	必须输入的字段。
email:true	必须输入正确格式的电子邮件。
url:true	必须输入正确格式的网址。
digits:true	必须输入整数。
equalTo:"#field"	输入值必须和 #field 相同。
number:true	必须输入合法的数字(负数，小数)
creditcard:true	必须输入合法的信用卡号
accept:	输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5	输入长度最多是5的字符串(汉字算一个字符)
minlength:10	输入长度最小是10的字符串(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于5
min:10	输入值不能小于10

③validate格式：

<script>
$(function(){
     $("选择器").validate({
        rules:{
        配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式)
        },
        messages:{
        违背验证规则给出的提示信息
        字段一一对应rules中的字段名
        }
     })
})
</script>

④例子：

regex是给正则表达式用的，在此案例处使用了<label>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证validate</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.validate.regex.js"></script>  
 <!-- 获取焦点后颜色变化，失去焦点恢复，提升用户体验 -->  
    <style type="text/css">          
        input:focus,text{
            border: 1px solid #f00;
            background: #fcc;
        }
        *{font-family: Verdana;font-size: 96%;}
        label { width: 10em; float: left; }
        label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
        p { clear: both; }
        .submit { margin-left: 12em; }
        em { font-weight: bold; padding-right: 1em; vertical-align: top; }
    </style>
    <script>
        $(function () {
            $("#myForm").validate({
                rules: {
                    username: {
                        required: true,
                        regex: /^\w{4,20}$/
                    },
                    password: {
                        required: true,
                        regex: /^\w{4,20}$/
                    },
                    repassword: {
                        required: true,
                        regex: /^\w{4,20}$/,
                        equalTo: "#psd"   //表示和id="psd"的值相同
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    username: {
                        required: "请输入姓名",
                        regex: "用户名格式不正确"
                    },
                    password: {
                        required: "请输入密码",
                        regex: "密码格式不正确"
                    },
                    repassword: {
                        required: "请输入密码",
                        regex: "密码格式不正确",
                        equalTo:"两次密码不一致"
                    },
                    email: {
                        required: "请输入Email地址",
                        email: "请输入正确的email地址"
                    }
                }
            })
        })
    </script>
</head>
<body>
<form id="myForm" action="">
    <p>
        <label for="username">用户名:</label><em>*</em>
        <input id="username" type="text" name="username"><span id="messdiv"></span><br>
    <p>
        <label for="psd">密码:</label><em>*</em>
        <input id="psd" type="password" name="password"><br>
    </p>
    <p>
        <label for="rePsd">再次输入密码:</label><em>*</em>
        <input id="rePsd" type="password" name="repassword"><br>
    </p>
    <p>
        <label for="email">邮箱:</label><em>*</em>
        <input id="email" type="text" name="email"><br>
    </p>
    <p>
    <input class="submit" type="submit" value="提交">
    </p>
</form>
</body>
</html>

小龙爷ღ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery中的表单验证validate

①首先引入validate.js放在jquery.js后面 <script src="js/jquery-3.4.1.min.js"></script> <script src="js/jquery.validate.js"></script> <script src="js/jquery.validate.rege...
复制链接

扫一扫