html5表单中增加了多种类型的表单，并且还具有验证功能。在移动端，手机等设备可以根据不同的输入类型弹出不同的键盘，比如iphone炸弹的键盘

但由于不同浏览器的非法输入提示不一致、风格不同，以及旧浏览器(IE9及以下)的不兼容，在生产环境中很少见到。例如，对于邮箱格式的检查，不同浏览器的效果如下：

铬

火狐浏览器

工业管理学(Industrial Engineering)

旅行队

Html5表单在不同的浏览器上有很大的问题

具体来说，有三个问题：

(1)当输入框模糊时，不会触发勾选，只是在提交点的时候，但一般希望用户离开输入框一次就勾选输入。

(2)提示控件的UI差别很大，safari不会触发提示控件，有些浏览器比如IE会在非法输入框中添加红色边框

(3)文案死了，不同浏览器的文案不一致，其中Chrome应该是最好的

一、跨浏览器表单验证插件

针对这些问题，互联网上有一些插件，比如html5 Form，已经跨浏览器处理过了，但是使用效果不是很理想，在safari下html5 Form失败。经过多次不成功的搜索和尝试，作者编写了一个跨浏览器的表单检测插件。效果如下：

铬

火狐浏览器

工业管理学(Industrial Engineering)

旅行队

插件效果示例：解决跨浏览器问题

1.统一用户界面

这个插件解决了上述问题。首先统一UI，模拟Chrome的提示效果。UI的风格和显示位置一致，可以自定义。对于文案问题，提供了是否使用浏览器默认文案的选项，因为考虑到有些浏览器比如Chrome提示更智能，比如上面的邮件文案，如果没有，就自定义文案。

2.支持异步验证

另一个强大的功能是支持异步身份验证，例如验证用户名是否存在：

该插件支持异步身份验证

3.支持多类型规则验证

此外，支持不同类型的规则验证，如必需/格式/用户定义。例如，电话号码的验证有两个要求，一个是必需的，另一个是按照电话号码的格式：

支持不同规则类型的验证

4.能够在中文和英文之间切换

还考虑了双语电台中英文切换的问题：

支持汉英切换

二、插件的使用

1.最简单的用途

该插件已经上传到github，其中包含一个演示。演示的效果如下：

表单的Html结构：

Form class='注册'标签电子邮件地址/标签输入类型=' email ' name=' account ' t=' email ' required=' label password/label输入类型=' password ' name=' password ' pattern='。{6，20}' pm=' password应该在6到20位数之间'必填=' ' labe input type=' password ' name=' confirm-pwd ' input id=' confirm-sign ' type=' submit ' value=' register ' p/p/在表单上方的第三行，定义了输入类型='email '，应该再写一个t='email '，主要是因为IE10以下的浏览器会强制将未知类型改为文本。

无关的CSS。有了上面的html结构，您只需要初始化插件

Newform ($(')。注册')[0]，{errormsgclass:' error '，//错误提示框的类名，用于自定义样式errorinputclass:' invalid '，//输入无效的类名用于自定义样式}，提交)；函数submit(){ console.log('表单验证成功，准备提交')；//提交操作}执行new From时传递了三个参数，第一个是表单的DOM元素，第二个参数是验证规则的一些配置，第三个是验证成功后的回调函数。对应如下：

Var form=function (form，checkOpt，submitcallback) {//.}第二个参数checkopt有两个属性，errorMsgClass和errorInputClass，用于自定义样式。

最简单的初始化可以验证所需的属性、模式属性和类型。模式使用正则表达式，其错误消息放在pm属性中，例如pm='密码应该在6到20位之间'。

2.添加自定义检查

上述密码需要一致输入两次，并在checkOpt中添加自定义验证：

Checkopt。规则={ ' confirm-pwd ' : { check : check pwd identity，//自定义验证函数msg: '两个密码输入不一致'//错误消息}}函数checkpwd identity () {if (this。表单['密码']。价值！==this.form['confirm-pwd']。value){ return false；}返回true}如上图，增加了一个规则属性，键值是输入的名称属性，值包含用户自定义的校验函数和错误信息

3.用户定义的异步检查

需要从服务请求中验证一些数据，例如检查帐户是否存在

check opt . rule . account={ check : check account exist，msg: '帐户已经存在！async: true //标志位，表示是异步测试}；函数checkAccountExist(failCallback，successCallback){ var input=this；Util.ajax ('/register/hasuser '，{account:this.value}，function(data){//如果用户存在，调用failCallback，让插件在if(data . is user==true){ fail callback()；}//如果成功，调用成功的回调函数else { successCallback()；} });}回调函数中传递了两个参数。如果验证失败，将执行第一个参数，如果验证成功，将为插件执行第二个参数。

4.添加用户定义的类型错误提示

表单提供了一组默认类型的错误提示：

form . prototype . validation message _ cn={ email : '无效邮箱格式'，number: '无效数字格式'，url: '无效网址格式'，password: '无效格式'，text: '无效格式' }；您也可以自定义一个并替换上面的副本。暂时没有提供参数

此外，您可以取消浏览器提供的副本，并使用上面的默认副本

//如果浏览器的语言不是中文，就不要用英文文案。checkOpt.disableBrowserMsg=适用于双语台！(navigator . language | | navigator . user language)。匹配还可以指定表单使用的语言：

//切换双语台时适用checkOpt.lang=' cn//或en iii。插件源代码分析

插件代码不是很复杂，只是需要考虑很多细节。

1.为非html5浏览器添加检查有效性功能

如果没有检查有效性函数，请添加一个。核心代码见Github，此处不再赘述。

var input=document . create element(' input ')；if(！输入。check validation){ html inputrement。原型。check validation=function(){//详细代码请参见github } } 2。添加错误提示

重点是计算提示的显示位置，

form . prototype . adderrormsg=function(input，msg){}

3.异步检查的实现

异步验证的难点在于何时执行提交回调。解决方案是在每个输入中添加一个hasCheck属性，如果检查通过，则设置为true，一旦焦点完成，则设置为false，模糊触发检查。只有当所有输入都为真时，才能执行提交回调。提交点时，下面checkAsync的第二个参数设置为真，而模糊验证为假

form . prototype . CheckAsync=function(input，DoeSubmit){ name=input . name；var rule=input . form . form . checkopt . rule；规则[名称] ['检查']。调用(input，//check failure回调函数(){ var form=input . form . form；Form.addErrorMsg(输入，Form.checkOpt.rule[name]。味精)；}.//已成功验证回调函数(){ input.hasCheck=trueif(do Submit){ input . form . form . try call Submit(input)；} });};代码的第14行检查除提交之外的所有输入是否都是hasCheck是否为真，如果是，则执行提交回调。

目前这个表单插件只支持文本/密码/网址/邮件/号码，应该能满足大部分表单提交。如有必要，可以进一步改进输入。

个人博客：http://yincheng.site/html5-form

参考：

1.使HTML5表单向后兼容

2.构建HTML5表单验证气泡替换

3.Github项目

本文已整理成《jquery表单验证大全》和《JavaScript表单验证大全》。欢迎你学习阅读。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。