Jq ajax验证表单【原创】

栏目: jQuery · 发布时间: 8年前

内容简介:Jq ajax验证表单【原创】

在表单验证的时候,如果用户输入的不符合规范,会弹出错误信息,直接用alert的话也可以弹出信息,但是为了优化用户体验,使页面更加生动,所以用到了这个插件来做验证提示,实现原理是当input框失去焦点时进行正则验证,判断用户输入是否正确;

formValidator-4.1.3

formValidatorRegex

theme

首先引入这三个js,当然别忘了还有jq第三方库

Jq ajax验证表单【原创】

拿注册来说,第一个是输入手机号,监听用户点击输入框时,发生以下改变:

Jq ajax验证表单【原创】

提示用户应该怎样输入才是正确的,当用户输入的格式不对时,会出现:

Jq ajax验证表单【原创】

当输入正确时:

Jq ajax验证表单【原创】

实现代码:

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

Jq ajax验证表单【原创】

Jq ajax验证表单【原创】 微信打赏

Jq ajax验证表单【原创】 支付宝打赏

感谢您对作者Liam的打赏,我们会更加努力!    如果您想成为作者,请点我


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据挖掘技术

数据挖掘技术

[美]MichaelJ.A.B / 别荣芳、尹静、邓六爱 / 机械工业 / 2006-7 / 49.00元

本书是数据挖掘领域的经典著作,数年来畅销不衰。全书从技术和应用两个方面,全面、系统地介绍了数据挖掘的商业环境、数据挖掘技术及其在商业环境中的应用。自从1997年本书第1版出版以来,数据挖掘界发生了巨大的变化,其中的大部分核心算法仍然保持不变,但是算法嵌入的软件、应用算法的数据库以及用于解决的商业问题都有所演进。第2版展示如何利用基本的数据挖掘方法和技术,解决常见的商业问题。 本书涵盖核心的数......一起来看看 《数据挖掘技术》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具