圆月山庄资源网 Design By www.vgjia.com
本文实例讲述了jQuery实现高度灵活的表单验证功能。分享给大家供大家参考,具体如下:
表单验证是前端开发过程中常见的一个需求,产品需求、业务逻辑的不同,表单验证的方式方法也有所区别。而最重要的是我们要清楚,表单验证的核心原则是——错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体验。
该插件依赖于jQuery,demo地址:https://github.com/CaptainLiao/zujian/tree/master/validator
基于以上原则,个人总结出表单验证的通用方法论:
为了使开发思路更加清晰,我将表单验证的过程分为两步:第一步,用户输入完验证当前输入的有效性;第二步,表单提交时验证整个表单。考虑如下布局:
<form action=""> <ul> <li><label for="username">用户名</label> <input type="text" name="username" id="username" placeholder="用户名"/></li> <li> <label for="password">密码</label> <input type="text" name="password" id="password" placeholder="密码"/> </li> <li> <label for="password">确认密码</label> <input type="text" name="password2" id="password-confirm" placeholder="确认密码"/> </li> <li> <label for="phone">手机</label> <input type="text" name="mobile" id="phone"/> </li> <li> <label for="email">邮箱</label> <input type="text" name="email" id="email"/> </li> </ul> <button type="submit" id="submit-btn">提交</button> </form>
一个较为通用的JS验证版本如下:
(function (window, $, undefined) { /** * @param {String} $el 表单元素 * @param {[Array]} rules 自定义验证规则 * @param {[Boolean]} isCheckAll 表单提交前全文验证 * @param {[Function]} callback 全部验证成功后的回调 * rules 支持四个字段:name, rule, message, equalTo */ function Validator($el, rules, isCheckAll, callback) { var required = 'required'; var params = Array.prototype.slice.call(arguments); this.$el = $el; this._rules = [ {// 用户名 username: required, rule: /^[\u4e00-\u9fa5\w]{6,12}$/, message: '不能包含敏感字符' }, {// 密码 password: required, rule: /^("placeholder") "placeholder") : '信息'; // 定义错误提示信息 if(val && val != 'undefined') { // 值不为空 if(ranges) { // 边界限定 range = ranges[0]; min = range.split(',')[0] "error-msg">请输入'+min+'-'+max+'位'+placeholderTxt+'</span>'; }else if(min) { errorMsg = '<span class="error-msg">最少输入'+min+'位'+placeholderTxt+'</span>'; }else if(max) { errorMsg = '<span class="error-msg">最多输入'+max+'位'+placeholderTxt+'</span>'; } }else { // 边界正确但匹配错误 errorMsg = '<span class="error-msg">'+errMsg+'</span>'; } }else { // 没有边界限定 errorMsg = '<span class="error-msg">'+errMsg+'</span>'; } if(equalTo) { var equalToVal = _this.$el.find('[name='+equalTo+']').val(); if(val !== equalToVal) { errorMsg = '<span class="error-msg">两次输入不一致,请重新输入</span>'; } } } else { // 值为空 errorMsg = '<span class="error-msg">请输入'+placeholderTxt+'</span>' } if($('.error-msg').length > 0) return; // 验证输入,显示提示信息 if(!reg.test(val) || (equalTo && val !== equalToVal)) { if($this.siblings('.error-msg').length == 0) { $this.after(errorMsg) .siblings('.error-msg') .hide() .fadeIn(); } }else { $this.siblings('.error-msg').remove(); } }) .on('focus', function () { $(this).siblings('.error-msg').remove(); }) }); }; Validator.prototype.checkAll = function () { var _this = this; if(_this.isCheckAll) { _this.$el.find('[type=submit]') .click(function () { _this.$el.find('[name]').trigger('blur'); if($('.error-msg').length > 0) { console.log('有错误信息'); return false; }else { console.log('提交成功'); _this.callback(); } }); return false; } }; Validator.prototype.init = function () { this.filterRules(); this.check(); this.checkAll(); }; $.fn.validator = function (rules, isCheckAll, callback) { var validate = new Validator(this, rules, isCheckAll, callback); return validate.init(); }; })(window, jQuery, undefined);
你可以这样使用:
var rules = [ {// 用户名 username: 'required', rule: /^[\u4e00-\u9fa5\d]{6,12}$/, message: '只支持数字loo2222' }, {// 密码 password: 'required', rule: /^("color: #800000">PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg更多关于jQuery相关内容可查看本站专题:《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
标签:
jQuery,表单验证
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]