频道导航

jQuery验证表单格式的使用方法

2019-01-06 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了jQuery验证表单格式的使用方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

工作之余整理一些工作中编写的代码，记录自己工作中的技术要点，便于自己记忆已经整合。以下是关于此jQuery验证的一些标记以及使用方法：

整个js代码都放入jquery_validate_1.1.0.js中，通过一个匿名函数，jQuery的扩展方法，扩展方法为：initValidate函数，方法中带一个options配置参数，目前配置参数只有一个属性，{handlerUrl：""}，提供是否需要后台请求验证的URL地址。只需要对取验证的DOM绑定$("ID").initValidate(options)。通过给input控件添加自定义属性，自定义属性规则如下：

以上一个简单的demo是验证输入格式是否为手机号，如果输入的信息不符合规则，错误信息会提示在输入框下一行，如下图：

属性都不验证； isrequired="true" // 必填验证 checkunique="true" // 后台Ajax唯一性验证，如果不唯一则验证失败； ctr-type="email" // 格式是email,pwd：密码，char：姓名，number：数字，float：带小数的数字，mobile：手机，idcard：身份证； repeatpwd="true" // 密码重复性检验，这个标签必须同时出现在两个需要检验的密码和重复输入密码控件。初始化示例： $('#panda').initValidate(); 提交按钮提交之前对所有输入进行验证： $('.okbtn').click(function () { return $('#panda').validateAllControls() }); Email验证使用示例： required="true" validate="true" name="myEmail" id="myEmail"/> 密码验证使用示例： required="true" validate="true" repeatpwd="true" name="newPassword"/>

以上的验证，前提条件是validate="true"，这个属性是验证其他规则的一切，如果没有设置这个属性，其他的任何设置都不会验证。此jquery验证为光标失去焦点的验证事件。

如果需要手动调用验证的话，调用单独的验证方法：$("#panda").validateAllControls(options);输入框的自定义以上面一样设置。

文件的url路径：，点击查看，不知道怎么添加压缩文件，这边留下一个url路径，为以后自己备份一份。

以上所述是小编给大家介绍的jQuery验证表单格式的使用方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

jQuery验证表单格式