技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 表单校验

表单校验

浏览:2428次  出处信息

最近有个项目,用到很多的表单校验,尝试了一下jQuery.validator,甚是顺手,地址:http://plugins.jquery.com/project/validate,基本的用法:

$('#formId').validate({
    debug:true, // 打开debug模式,不会真实提交,适合测试
    rules:{
        uName:"required", // 需要录入
        uNick:{
            required:true
        }, // 需要录入的另一种写法
        uBlog:{
            required:true,
            url:true
        } // 需要输入,且录入的必须是url
    },
    messages:{ // 自定义提示语文字
        uName:"请输入用户名"
    },
    submitHandler:function(form) { // 表单提交,需要jqueyr.form插件
        form.submit();
    }
}

阅读一下文档差不多就会了解,支持的校验格式有:

required:必填字段

email:电子邮件

url:合法的网址

date:日期

dateISO:日期(ISO)

number:数字

digits:整数

creditcard:信用卡号

equalTo:相同的值

accept:拥有合法后缀名的字符串

maxlength:最多长度的字符串

minlength:最少长度的字符串

rangelength:一个长度介于最小值和最大值之间的字符串

range:一个介于最小值和最大值之间的值

max:最大值

min:最小值

相对高阶一点功能:

  • 自定义错误提示信息

    当然,你可以通过定义messages来修改提示信息,但你想偷懒又不想用默认的英文提示,直接引入默认提示文字

    <script src="path/to/localization/messages_cn.js" type="text/javascript"></script>
  • IE6下不工作的bug

    传闻IE6下,jquery.validate.js有乱码,不能正常工作,解决办法:

    <script src="path/to/jquery.validate.js" type="text/javascript" charset="iso-8859-1"></script>
  • 控制错误信息显示位置

    有的时候默认的错误信息显示有问题,比如多个单选框,默认的会把错误信息显示在第一个单选框后面,页面就乱了,解决办法:

    errorPlacement: function(error, element) {
        if (element.is(":radio")) {
            error.appendTo(element.parent().parent("td"));
        else {
            error.appendTo(element.parent());
        }
    }

    当然,还可以重载invalidHandler来实现

  • 依赖校验

    有的时候,一个输入框的校验依赖于其他条件,比如登录的时候可以通过用户名或者邮箱登录,只有当用户选择用邮箱登录时,才对邮箱输入框验证,rules中可以这样写:

    uMail:{
        required:{depends: function(element) {
            return true == $('#isMail').val();
        }},
        email:true
    }

    这样只有用户选择了用邮箱登录才会校验 邮箱项,否则不校验。

建议继续学习:

  1. JQuery实现Excel表格呈现    (阅读:46520)
  2. 分享一个JQUERY颜色选择插件    (阅读:12650)
  3. jQuery插件---轻量级的弹出窗口wBox.    (阅读:9688)
  4. 10个强大的Ajax jQuery文件上传程序    (阅读:7757)
  5. Web表单设计之注册表单    (阅读:7690)
  6. jQuery的data()方法    (阅读:7585)
  7. jQuery性能优化指南    (阅读:7325)
  8. jQuery Color Animations颜色动画插件    (阅读:7088)
  9. 精于图片处理的10款jQuery插件    (阅读:6219)
  10. jQuery中getJSON跨域原理详解    (阅读:5620)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1