内容简介:Jq ajax验证表单【原创】
在表单验证的时候,如果用户输入的不符合规范,会弹出错误信息,直接用alert的话也可以弹出信息,但是为了优化用户体验,使页面更加生动,所以用到了这个插件来做验证提示,实现原理是当input框失去焦点时进行正则验证,判断用户输入是否正确;
首先引入这三个js,当然别忘了还有jq第三方库
拿注册来说,第一个是输入手机号,监听用户点击输入框时,发生以下改变:
提示用户应该怎样输入才是正确的,当用户输入的格式不对时,会出现:
当输入正确时:
实现代码:
1、初始值:
<input size="30" id="mobile" name="mobile" type="text" class="input" value="">
<div id="mobileTip" class="onShow">主要用于交易通知</div>
2、js代码
$("#mobile").formValidator({onShow:"主要用于交易通知",onFocus:"11位数字,如“13812345678”",onCorrect:"谢谢你的合作",onEmpty:"该项为必填项"}).inputValidator({min:11,max:11,onError:"手机号码必须是11位的,请确认"}).regexValidator({regExp:"mobile",dataType:"enum",onError:"你输入的手机号码格式不正确"}).({})
ajaxValidator方法是接api验证手机号是否已经注册;
3、以同样的方式就可以验证不同类型的值了,这样做使页面更生动,交互性更强,用户体验性更好。
转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/21271.html
微信打赏
支付宝打赏
感谢您对作者Liam的打赏,我们会更加努力! 如果您想成为作者,请点我
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
编程语言实现模式
Terence Parr / 李袁奎、尧飘海 / 华中科技大学出版社 / 2012-3-20 / 72.00元
《编程语言实现模式》旨在传授开发语言应用(工具)的经验和理念,帮助读者构建自己的语言应用。这里的语言应用并非特指用编译器或解释器实现编程语言,而是泛指任何处理、分析、翻译输入文件的程序,比如配置文件读取器、数据读取器、模型驱动的代码生成器、源码到源码的翻译器、源码分析工具、解释器,以及诸如此类的工具。为此,作者举例讲解已有语言应用的工作机制,拆解、归纳出31种易于理解且常用的设计模式(每种都包括通......一起来看看 《编程语言实现模式》 这本书的介绍吧!