Jquery插件-Jquery validate

最新推荐文章于 2021-07-15 23:45:37 发布

「已注销」

最新推荐文章于 2021-07-15 23:45:37 发布

阅读量273

点赞数 1

分类专栏： JavaScript 前端文章标签： jquery jquery插件插件

本文链接：https://blog.csdn.net/coder_null/article/details/69889639

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

所做的东西即将收尾了，终于不用天天写代码了，可以休息一下了(手动捂脸哭泣)。但是连续写代码的这这几周以来，学到的东西还是挺多的。对以前实习的内容也慢慢继续加深了了解。看来程序猿真的是从实践之中找到更多经验和更多知识的。在临近收尾的时候，需要对细节进行处理，比如一些输入框的校验等，所以又设计到以前实习时所用到的一个插件：Jquery validate。

导入js库

导入jquery validate所用到的js库，所用到的库包括：jquery.js、jquery.validate.js、jquery.validate.min.js。
导入如下所示：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

了解基本的用法

Jquery Validate已经为我们提供了一部分的默认提示信息，同时，我们也可以自定义校验规则。

使用方法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<script type="text/javascript" src="tools/jquery-2.2.3.js"></script>
<script type="text/javascript" src="tools/jquery.validate.js"></script>
<script type="text/javascript" src="tools/jquery.validate.min.js"></script>
<script type="text/javascript" src="tools/jquery.metadata.js"></script>
<script type="text/javascript" src="tools/messages_zh.js"></script>
<link rel="stylesheet" href="tip.css"/>
<script type="text/javascript">
    $(function(){
            $("#formid").validate();
        });
</script>
</head>
<body>
<form id="formid" action="" method="post">
    <div>
        <input type="text" name="name" id="name" placeholder="输入姓名" required>
    </div>
    <div>
        <input type="text" name="age" id="age" placeholder="输入年龄">
    </div>
    <div>
        <input type="button" name="sbutton" id="sbutton" value="确认">
    </div>
</form>
<script type="text/javascript">
    $("#sbutton").click(function(){
        $("#formid").submit();
    });
</script>
</body>
</html>

以上的代码，导入的库中 jquery.metadata.js ,下载链接是将校验内容写到class里面必须要导入的包，例如：class="required"。messages_zh.js 这个包则是Jquery Validate的中文支持库。

自定义的校验方法

例如校验手机号码是否符合手机号码的规则

$.validator.addMethod( "phone", function( value, element ) {
    return this.optional( element ) || /^1(3[0-9]|4[5-7]|5[0-35-9]|8[0-9]|7[6-8])\d{8}$/.test( value );
}, "手机号码不合法" );

将以上的内容加到中文支持库messages_zh.js中，然后在html中的class加上phone的这个校验。class="required phone"

其他的设置

$.validator.setDefaults({
    errorPlacement:function(error,element){
        error.appendTo(element.parent());
    },//错误提示的位置,显示在相对应控件的后面
    focusInvalid:true,//校验有错不聚焦
    focusCleanup:false, //聚焦清理错误提示
    onkeyup: false  //输入过程不校验
});

后记：写得比较简单，其实在使用的过程中，由于是初次使用，然后在jsp中一直没有效果，经过测试发现原来是页面使用了异步请求ajax，使得表单提交的时候并没有任何作用，后来找到了解决方法，就是通过jquery中valid()方法来实现validate功能。

$(function(){
    $("#formid").validate();
    $("#sbutton").click(function(){
        if($("#formid").valid()){
            $.ajax({
            //异步请求的内容
            });
        }
    });
});

还有其他两种方法同时可以解决validate异步请求问题

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery插件-Jquery validate

所做的东西即将收尾了，终于不用天天写代码了，可以休息一下了(手动捂脸哭泣)。但是连续写代码的这这几周以来，学到的东西还是挺多的。对以前实习的内容也慢慢继续加深了了解。看来程序猿真的是从实践之中找到更多经验和更多知识的。在临近收尾的时候，需要对细节进行处理，比如一些输入框的校验等，所以又设计到以前实习时所用到的一个插件：Jquery validate。导入js库导入jquery validate所用
复制链接

扫一扫