【精品】前端验证框架：jquery-validate.js

梁云亮

已于 2023-04-04 13:24:41 修改

阅读量835

点赞数 13

分类专栏： # TypeScript/JavaScript/JQuery 文章标签： jquery 前端 validate 验证前端验证

于 2022-05-09 21:00:19 首次发布

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/124665461

版权

TypeScript/JavaScript/JQuery 专栏收录该内容

73 篇文章 4 订阅

订阅专栏

简介

jquery.validate.js是我们经常用到的form表单验证插件，可以很方便的帮我们进行表单验证。

官网：https://bassistance.de/jquery-plugins/jquery-plugin-validation

校验规则

规则	说明
required:true	必输字段
remote:“check.php”	使用ajax方法调用check.php验证输入值
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期日期校验ie6出错，慎用
dateISO:true	必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入整数
creditcard:	必须输入合法的信用卡号
equalTo:“#field”	输入值必须和#field相同
accept:	输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5	输入长度最多是5的字符串(汉字算一个字符)
minlength:10	输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于5
min:10	输入值不能小于10

使用步骤

引入jquery.min.js
引入 jquery.validate.js
页面加载后对表单进行验证 $(“#表单id名”).validate({}）
在validate中的rules中编写验证规则，比如：
- 字段的name属性:"校验器:（一个输入框只有一个校验器的时候使用）
- 字段的name属性:{校验器:值,校验器:值} (输入框需要有多个校验器的时候使用)
在validate中的messages中编写提示信息(格式与rules相对应)
在validate中的submitHandler中编写验证通过执行的内容
表单使用input type="submit"提交

使用

将校验规则写到控件中

<script src="js/jquery-validate/jquery.js"></script>
<script src="js/jquery-validate/jquery.validate.js"></script>
<script src="js/jquery-validate/messages_zh.js"></script>

<form action="admin" method="post" id="loginForm">
    <input type="text" name="account" required minlength="4"> <br>
    <input type="password" name="password" required minlength="4"> <br>
    <input type="submit" value="登录">
</form>

<script type="text/javascript">
	$(function (){
	    $("#loginForm").validate();
	});
</script>

将校验规则写到js代码中

<script src="js/jquery-validate/jquery.validate.js"></script>
<script src="js/jquery-validate/jquery.validate.js"></script>
<script src="js/jquery-validate/messages_zh.js"></script>

<form action="user" method="post" enctype="multipart/form-data" id="userAddForm">
    姓名：<input name="nickname" type="text"> <br>
    用户头像：<input type="file" name="avatar"><br>
    性别：<input checked="checked" name="gender" type="radio" value="1">男
          <input name="gender" type="radio" value="0">女    <br>
    邮件：<input id="email" name="email" type="text"> <br>
    电话：<input id="tel" name="tel" type="text">
    QQ：<input name="qq" type="text"> <br>
    微信：<input name="wechat" type="text"> <br>
    积分：<input name="credits" type="text"> <br>
    简介：<input name="intro" type="text"> <br>
    验证码：<input name="verifyCode" type="text">
    <img alt="验证码" onClick="this.src=this.src+'?'+Math.random();" src="verifyCode"><br>
    <input id="submitBtn" type="submit" value="提交">
</form>

<script>
    $(function () {
        $("#userAddForm").validate({
            rules: {
                nickname: {
                    required: true,
                    minLength: 4
                },
                avatar: "required",
                email: {
                    required: true,
                    email: true
                },
                QQ: {
                    required: true,
                    minLength: 5
                },
                wechat: "required",
                credits: {
                    required: true,
                    digits: true
                },
                verifyCode:"required"
            },messages:{
                nickname: "请输入用户名",
                avatar:"请选择头像",
                email:"邮箱必须正确填写",
                QQ:"QQ不能为空且长度必须大于等于5",
                wechat: "微信不能为空",
                credits: "积分不能为空且必须为整数",
                verifyCode: "验证码不能为空",
            }
        })
    });
</script>

注：如果某个控件没有message，将调用默认的信息

示例：自定义提示信息，错误提示位置以及颜色

页面代码

<html>
<body>
    <form id="loginForm" method="post" action="">
        <h2>会员登录</h2>
        <h3>用户名</h3>
        <input class="name" id="account" name="account" type="text" required minLength="6"/>
        <div style="color: red;">
            <label for="account" class="error"></label>
        </div>
        <h3>密码</h3>
        <input class="pwd" id="password" name="password" type="password"  required minLength="6"/>
        <div style="color: red;">
            <label for="password" class="error"></label>
        </div>
        <div class="zhuangtai">
            <input checked="checked" type="checkbox"/> 下次自动登录
        </div>
        <div class="subs">
            <input class="submit" src="http://127.0.0.1:9005/wego-simple/sys/frontend/sub.jpg" type="image"/>
        </div>
    </form>
    
	<script type="text/javascript" src="/frontend/js/jquery"></script>
	<script type="text/javascript" src="/frontend/js/jquery.validate.js"></script>
	<script type="text/javascript">
	    $(function () {
	        $("#loginForm").validate({
	            messages: {
	                account: "用户名不能小于六位，请重新输入！",
	                password: "密码不能小于六位，请重新输入！",
	            }
	        })
	    });
	</script>
</body>
</html>

效果

在这里插入图片描述

综合示例

<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="./jquery-3.1.1.js"></script>
    <script src="./jquery.validate.js"></script>
</head>
<body>
<div id="main">
    <form class="cmxform" id="signupForm" method="get" action="">
        <p>
            <label for="name">用户名</label>
            <input id="name" name="name" type="text">
        </p>
        <p>
            <label for="password">密码</label>
            <input id="password" name="password" type="password">
        </p>
        <p>
            <label for="confirm_password">确认密码</label>
            <input id="confirm_password" name="confirm_password" type="password">
        </p>
        <p>
            <label for="email">邮箱</label>
            <input id="email" name="email" type="email">
        </p>
        <p>
            <label for="agree">协议</label>
            <input type="checkbox" class="checkbox" id="agree" name="agree">
        </p>
        <p>
            <input class="submit" type="submit" value="Submit">
        </p>
    </form>
    <script>
        $(function () {
            $("#signupForm").validate({
                rules: {
                    name: "required",
                    password: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    agree: "required"
                },
                messages: {
                    name: "请输入名字",
                    password: {
                        required: "请输入密码",
                        minlength: "密码至少5个字符"
                    },
                    confirm_password: {
                        required: "请输入密码",
                        minlength: "密码至少5个字符",
                        equalTo: "密码必须和上面的一致"
                    },
                    email: "请输入有效的邮件地址",
                    agree: "请接受协议"
                }
            });
        });
    </script>
</div>
</body>
</html>