使用JQuery的前端验证

最新推荐文章于 2023-05-22 17:31:36 发布

yeiweilan

最新推荐文章于 2023-05-22 17:31:36 发布

阅读量473

点赞数

分类专栏： web开发前后端文章标签： jquery 前端插件库

本文链接：https://blog.csdn.net/yeiweilan/article/details/77893135

版权

web开发前后端专栏收录该内容

14 篇文章 5 订阅

订阅专栏

先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导messages_zh.js。
注意Validate的导入要在jQuery库之后。代码如下：

<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="messages_zh.js" type="text/javascript"></script>

然后只要定义验证规则和指定错误提示位置就可以了。

基础为jQuery的插件validate。

格式省略，只表现重要代码： 
<form name="form1">
 <label for="us">UserName:<input type="text" name="us" id="us" />     </label> 
 <label for="pwd">PassWord:<input type="password" name="pwd"  name="pwd" /> </label>
</form>
 <script type="text/javascript">
    $(function(){
        $("#form1").validate();
      });
 </script>

其中的“ $(“#form1”).validate(); ” 是最重要的，如果需要验证必须使用该代码，否则无法实现验证。如果指定的表单不同验证时只验证指定表单。

具体验证

实现输入内容不能为空

<input type="text" name="in" nValidate="{required:true}" />

其中最重要的是 nValidate=”{required:true}” 并且以后需要添加任何验证功能都要在 nValidate 中进行修改.

实现输入内容必须为电子邮箱

<input type="text" name="ceemail" nValidate="{email:true}" />

实现输入内容必须为电子邮箱，且不能为空

<input type="text" name="ceemail" nValidate="{required:true,email:true}" />

这里我们使用了组合的方式将电子邮箱的验证功能和输入内容不能为空的验证功能同时启用，那么就可以实现必须输入内容并且输入的内容必须符合电子邮箱的格式。

实现输入内容必须为URL

nValidate="{url:true}"

为了更快速的学习，下面将会列出参数名称以及冒号后面所需要填写的参数和类型

实现输入内容必须为日期 date:true
实现输入内容必须为数字 number:true
实现输入内容必须为整数 digits:true
实现输入内容必须和指定输入框内容相同 equalTo:’#id’
实现输入内容必须大于指定字符长度 minlength:size
实现输入内容必须小于指定字符长度 maxlength:size
实现输入内容必须在指定字符长度范围内 rangelength:[minsize,maxsize]
实现输入数值必须大于指定数值 min : num
num : 最小数值（输入的数值可以等于这个数值）
实现输入数值必须小于指定数值 max : num
num : 最大数值（输入的数值可以等于这个数值）
实现输入数值必须在指定数值范围内 range : [minnum,maxnum]

自定义提示消息

通用属性 – messages
如果是设置不同输入错误的提示信息，必须在”messages”下进行增加修改，如下:

<input type="text" name="test2" nValidate="{required:true,messages:{required:'用户名不能为空'}}"

对于上面的输入框，如果用户没有输入用户名则会提示用户“用户名不能为空”，而默认的是“字段不能为空”.
并且可以设置不同错误类型所提示的消息,如下:

<input type="text" name="test1" nValidate="{required:true,number:true,minlength:5,maxlength:120,messages:{required:'请输入年龄',number:'请输入数字',minlength:'年龄不可以小于{0}岁',maxlength:'年龄不可以大于{0}岁'}}" />

其中的”{0}“，后台jQuery将会用我们设置”minlength“和”maxlength“中的数值替换掉。这样就可以自定义消息了。

required : “输入为空时提示的消息”
number ：”输入类型非数值类型时提示的消息“
minlength ：”输入内容的字符创长度小于参数设置的值时提示的消息“ 存在参数 {0} 为 minlength 设置的值
maxlength : ”输入内容的字符长度大于参数设置的值时提示的消息“ 存在参数 {0} 为 maxlength 设置的值
rangelength : ”输入内容的字符长度不在指定范围长时提示的消息“ 存在参数 {0} 为最短长度 {1} 为最长长度
min : ”输入的数值小于参数设置的值时提示的消息“ 存在参数{0} 为 min 设置的值
max ：”输入的数值大于参数设置的值时提示的消息“ 存在参数{0} 为 max 设置的值
range ： ”输入的数值不在指定范围时提示的消息“ 存在参数{0} 为最小数值的值 {1} 为最大数值的值
email : ”输入内容不符合邮箱地址时提示的消息“
url : “输入的内容不符合URL地址时提示的消息”
digits ：”输入的类型不是整数时提示的消息“
date ：”输入的类型不是日期时提示的消息“

实例

一

<script type="text/javascript">
        $(function () {
            $("#form1").validate({
                /*自定义验证规则*/
                rules:{
                    username:{ required:true,minlength:6 },
                    userpass:{ required:true,minlength:10 }
                },
                /*错误提示位置*/
                errorPlacement:function(error,element){
                //第一个参数是错误的提示文字，第二个参数是当前输入框
                //用的是jQuery，这里设置的是，错误提示文本显示在当前文本框的兄弟span中
                    error.appendTo(element.siblings("span"));
                }
            });
        })
    </script>
　　
　　HTML代码：
　　<form id="form1" action="#" method="post">
　　　　<p>用户登录</p>
　　　　<p>名称:<input id="txtName" name="username" type="text" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
　　　　<p>密码:<input id="txtPass" name="userpass" type="password" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
　　　　<div>
　　　　　　<input id="btnLogin" type="button" value="登录" class="btn" />&nbsp;&nbsp;
　　　　　　<input id="btnReset" type="button" value="取消" class="btn" />&nbsp;&nbsp;
　　　　</div>
　　</form>
//以下为解释
  messages: { UserName: { 
                required: "请输入用户名！"　　//注意，同样是必填项，但是优先显示在messages里的提示信息
                        },
                Email:{
                    required:"请输入邮箱地址!"　　//不会统一输出 必填字段 了哦
                      }
            }
实际上，jQuery.Validate默认的错误提示是生成一个class=error的label，所以，如果想设置样式，最简单的方法就是针对这个label设置就OK了，当然默认的label是可以手动更改的。

ajax异步验证

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>表单验证插件</title>
    <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/Scripts/messages_zh.js" type="text/javascript"></script>
    <script src="/Scripts/validates.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#form1").validate({
                rules: {
                    UserName: { required: true, minlength: 3, maxlength: 18, remote: "/Home/CheckUserName" },
                    Email: { required: true,email:true },
                    UserPassword: { required: true ,minlength: 6 },
                    Mobile: { required: true, number:true },
                    IdCard: { required: true,isIdCardNo: true },
                    Age: { required: true ,number:true,min:1,max:100 }
                },
                messages:{
                    UserName: { 
                        required: "请输入用户名！",
                        minlength: "用户名长度最少需要3位！",
                        maxlength: "用户名长度最大不能超过18位！",
                        remote: "此用户名已存在！"
                     },
                    Email: {
                        required: "请填写邮箱",
                        email: "请输入正确的邮箱格式"
                    },
                    UserPassword: {
                        required: "请填写你的密码!",
                        minlength: "密码长度不能小于6位"
                    },
                    Mobile: {
                        required: "请填写你的手机号码",
                        number:"手机号码只能为数字"
                     },
                    IdCard: {
                        required: "请输入身份证号码！",
                        isIdCardNo:"请输入正确的身份证号码！"
                    },
                    Age: {
                        required: "请输入年龄!",
                        number: "请输入数字",
                        min: "年龄不能小于1", 
                        max: "年龄不能大于100" 
                    }
                },
                /*错误提示位置*/
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent());
                }
            })
        })
    </script>
</head>
<body>
    <form id="form1" method="post" action="">
        <div>
        <p> 用户名:<input type="text" value="" name="UserName" /> </p>
        <p> 密码:<input type="password" value="" name="UserPassword" /> </p>
        <p> 邮箱:<input type="text" value="" name="Email" /> </p>
        <p> 手机号码:<input type="text" value="" name="Mobile" /> </p>
        <p> 身份证号码:<input type="text" value="" name="IdCard" /> </p>
        <p> 年龄:<input type="text" value="" name="Age" /> </p>
        <p> <input type="submit" id="btn1" value="提交"></p>
        </div>
    </form>
</body>
</html>

jquery validate默认验证规则的提示语中文化：

$.extend($.validator.messages, {
        required: "必填",
        remote: "请修正该字段",
        email: "电子邮件格式不正确",
        url: "网址格式不正确",
        date: "日期格式不正确",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符",
        maxlength: $.validator.format("请输入一个 长度最多是 {0} 的字符"),
        minlength: $.validator.format("请输入一个 长度最少是 {0} 的字符"),
        rangelength: $.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符"),
        range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: $.validator.format("请输入一个最大为{0} 的值"),
        min: $.validator.format("请输入一个最小为{0} 的值")
    });

validate默认的验证规则中文解释：

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

yeiweilan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery的前端验证

先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导messages_zh.js。注意Validate的导入要在jQuery库之后。代码如下：<script src="jQuery.1.8.3.js" type="text/javascript"></script><script src="jquery.validate.js" type="text/javascript
复制链接

扫一扫

专栏目录