• jquery.validate中文API和应用实例(一)简单验证


    中文版jquery.validate API下载地址: jQuery_validateAPI中文.rar

    查看在简单验证规则的使用,请到jquery.validate中文API和应用实例(二)简单验证-规则的应用

    以下是简单应用实例:

    1.用class样式进行验证,用法简单,但不能自定义错误信息,只能修改jquery-1.4.1.min.js中的内置消息,也不支持高级验证规则。

        <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/Scripts/jquery.validate.min.js"></script>
        <h2>
            ValidateTest</h2>
    <form id="loginForm" action="post">    
    <table border="0" cellpadding="0" cellspacing="0"> <tr> <td>       <input type="text" id="UserEmail" class="required email" />
    </td> </tr> <tr> <td>       <input type="password" id="Password" class="required" />
    </td> </tr> <tr> <td> <input type="submit" value="submit" onclick="checkInput();" /> </td> </tr> </table> </form> <script language="javascript" type="text/javascript"> function checkInput() { if ($("#loginForm").valid()) { return true; } return false; } </script>

    当然,如果不希望使用onclick事件进行提交验证,也可以在页面加载时加上jQuery的监控,代码如下:

           $(document).ready(function () {
                jQuery("#loginForm").validate();
            });   
    

    这时就不需要在提交按钮上加 onclick="checkInput();"这个事件了。

    2.使用Json字符串验证,使用该规则验证,必须额外引入jquery.metadata.pack.js文件

    修改上面的两个INPUT如下:

    <input type="text" id="UserEmail" class="{validate:{ required:true,email:true }}" />
    <input type="password" id="Password" class="
    {validate:{required:true,minlength:6,messages:{required:'请输入密码 ',minlength:'密码至少6位'}}}" />

    可以看到,我们已经可以自定义错误消息了。

    另外必须在页面中加上以下代码:

    $(document).ready(function () {
    $(
    "#loginForm").validate({
    meta:
    "validate"
    });
    });
  • 相关阅读:
    ultraiso:usb-hdd+ v2
    ntfs格式uefi启动u盘
    M.2、U.2谁更好?主流硬盘接口大扫盲
    高清(200万像素)多灯红外防水枪型网络摄像机 DH-IPC-HFW5200-IRA
    佳能 imageclass mf40120
    hotswapagent——热更新代码而无需重启生产环境
    S5700&S5710 产品文档 : 配置
    hp 88a加粉
    传真机色带安装
    Idea下Android的安装与配置 (2019.11更新)
  • 原文地址:https://www.cnblogs.com/wangjq/p/1979189.html
Copyright © 2020-2023  润新知