js浏览器html5表单验证


Posted in Javascript onOctober 17, 2016

html5表单添加了很多类型的表单,而且还自带验证的功能。在移动端,手机等设备能够根据不同的input类型弹出不同的键盘,例如iphone弹的键盘

js浏览器html5表单验证

但是由于不同的浏览器对不合法输入提示文案不一致,样式也不一样,并且老的浏览器不兼容(IE9及以下),导致了在生产环境中比较少见到。例如对于邮箱格式的检验,不同浏览器的效果如下:

Chrome

js浏览器html5表单验证

Firefox

js浏览器html5表单验证

IE

js浏览器html5表单验证

safari

js浏览器html5表单验证

html5的表单跨浏览器有很大的问题

具体来说存在三个问题:

(1) 输入框blur的时候不会触发检查,只有在点提交时才触发,但是一般是希望用户一旦离开这个输入框就对其输入进行检查

(2) 提示控件的UI差异很大,safari还不会触发提示控件,一些浏览器如IE会给非法的输入框添加一个红色的边框

(3) 文案是写死的,并且不同浏览器的文案不一致,其中应该以Chrome的提示最好

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

为解决这些问题,网上有一些插件,如html5 Form,做了跨浏览器的处理,但是使用起来效果并不是十分让人满意,html5 Form在safari下面就失效了。在多方查找和尝试未果之下,笔者自已写了一个跨浏览器的表单检测插件,效果如下:

Chrome

js浏览器html5表单验证

Firefox

js浏览器html5表单验证

IE

js浏览器html5表单验证

safari

js浏览器html5表单验证

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

1. 统一UI

这个插件解决了上面的问题,首先是统一了UI,模拟了Chrome的提示效果,UI的样式和显示位置都是一致的,并且可以自定义。对于文案问题提供了是否使用浏览器默认文案的选项,因为考虑到有些浏览器如Chrome的提示比较智能,例如上面的邮箱文案,如果不使用则自定义文案。

2. 支持异步验证

另外一个强大的功能是支持异步验证,如验证用户名是否存在:

js浏览器html5表单验证

插件支持异步验证

3. 支持多重类型规则验证

还有,支持不同类型的规则验证,如必填/格式/自定义,例如对电话号码的验证有两个要求,一个是必填,另外一个是符合电话号码的格式:

js浏览器html5表单验证js浏览器html5表单验证

支持不同规则类型的验证

4. 能够中英文切换

还考虑到了双语站中英文切换的问题:

js浏览器html5表单验证js浏览器html5表单验证

支持中英文切换

二、插件使用方法

1. 最简单的使用

插件已经上传到github,里面包含了一个demo,demo的效果如下:

js浏览器html5表单验证

form的html结构:

<form class="sign-up">
 <label>邮箱地址</label>
 <input type="email" name="account" t="email" required="">
 <label>密码</label>
 <input type="password" name="password" pattern=".{6,20}" pm="密码要在6到20位之间" required="">
 <label>确认密码</label>
 <input type="password" name="confirm-pwd">
 <input id="confirm-sign" type="submit" value="注册">
 <p></p>
 </form>

     上面第3行,定义了input的type="email",还要再写多一个t="email"主要是因为IE10以下的浏览器会把不认识的type强制改成text。

     无关的CSS略。有了上面的html结构之后,只需要初始化插件就可以了

new Form($(".sign-up")[0], {
 errorMsgClass: "error", //错误提示框的类名,用于自定义样式
 errorInputClass: "invalid", //input无效的类名,用于自定义样式
}, submit);

function submit(){
 console.log("表单验证成功,准备提交");
 //提交操作 
}

      执行new From的时候传了3个参数,第一个是form的DOM元素,第二个参数是验证规则的一些配置,第三是验证成功的回调函数。对应如下:

var Form = function(form, checkOpt, submitCallback){
 //...
}

第二个参数checkOpt有两个属性errorMsgClass和errorInputClass用来自定义样式。

最简单的初始化,能够实现required属性、pattern属性和类型检验生效。pattern使用正则表达式,其错误提示信息放在pm属性里,如上面的 pm="密码要在6到20位之间" 。

2. 添加自定义检验

上面的密码需要保证两次的输入一致,在checkOpt里面添加自定义验证:

checkOpt.rule = {
 "confirm-pwd": {
 check: checkPwdIdentity, //自定义检验函数
 msg: "两次密码输入不一致" //出错提示信息
 }
 } 
 
 function checkPwdIdentity(){
 if(this.form["password"].value !== this.form["confirm-pwd"].value){
 return false;
 }
 return true;
 }

如上所示,添加了一个rule属性,key值为input的name属性,value值包含一个自定义的检验函数和出错信息

3. 自定义异步检验

有些数据需要向服务请求检验,如检验账户是否存在

checkOpt.rule.account = {
 check: checkAccountExist,
 msg: "账户已存在!",
 async: true //标志位,说明是异步的检验
};

function checkAccountExist(failCallback, successCallback){
 var input = this;
 util.ajax("/register/hasUser", {account: this.value}, function(data){
 //如果用户存在则调用failCallback,让插件添加一个错误提示
 if(data.isUser === true){
 failCallback();
 }
 //成功则调用成功的回调函数
 else{
 successCallback();
 }
 });
 }

在回调函数里面传进两个参数,如果检验失败则执行第一个参数,成功则执行第二个参数,为插件所用。

4. 添加自定义类型出错提示

Form已经提供了一套默认类型出错提示:

Form.prototype.validationMessage_cn = {
 email: '无效的邮箱格式',
 number: '无效的数字格式',
 url: '无效的网址格式',
 password: '格式无效',
 text: '格式无效'
};

      你也可以自定义一个,将上面的文案换掉即可,暂时没有提供参数

      另外可以取消掉浏览器提供的文案,用上面的默认文案

//如果浏览器的语言不是中文的话,就不要使用英文的文案了,双语站时候适用
checkOpt.disableBrowserMsg = !(navigator.language || navigator.userLanguage).match(/cn/i)

      还可以指定Form使用的语言:

//双语站切换时适用
checkOpt.lang = "cn"; //或者en
 

三、插件源码解析

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

1. 为非html5浏览器添加checkValidity函数

如果没有checkValidity函数的话就给它添加一个,核心代码见Github,这里不进行详细说明。

var input = document.createElement("input");
 if(!input.checkValidity){
 HTMLInputElement.prototype.checkValidity = function(){
 //详细代码见github
 }
 }
 

2. 添加错误提示

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

Form.prototype.addErrorMsg = function(input, msg){

}

3. 异步检验的实现

异步检验难点在于,什么时候执行submit回调。解决方案是给每个input添加一个hasCheck属性,如果检查通过则设置为true,一旦focus了就设为false,blur则触发检查。只有所有的input都有了hasCheck为true时才能执行submit回调。下面的checkAsync的第二个参数,点提交时设置成true,而blur验证则为false

Form.prototype.checkAsync = function(input, doesSubmit){
 name = input.name;
 var rule = input.form.Form.checkOpt.rule;
 rule[name]["check"].call(input, 
 //检验失败回调函数
 function(){
 var Form = input.form.Form;
 Form.addErrorMsg(input, Form.checkOpt.rule[name].msg);
 },
 //检验成功回调函数 
 function(){
 input.hasCheck = true;
 if(doesSubmit){
 input.form.Form.tryCallSubmit(input);
 }
 });
};

代码的第14行检查除submit外所有的input是否为hasCheck为true,如果有则执行submit callback。    

 现在这个Form插件只支持text/password/url/email/number这几种input,应该可以满足大部份的表单提交,如果需要,可再继续完善。 

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

参考:

1. Making HTML5 Form backwards compatible

2. Building HTML5 Form Validation Bubble Replacements

3. Github工程

本文已被整理到了《jquery表单验证大全》、《JavaScript表单验证大全》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
vue axios登录请求拦截器
Apr 02 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
使用开源工具制作网页验证码的方法
Oct 17 #Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 #Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 #Javascript
JQuery中解决重复动画的方法
Oct 17 #Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 #Javascript
原生JavaScript制作计算器
Oct 16 #Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 #Javascript
You might like
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
javascript 写类方式之一
2009/07/05 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
vue实现评价星星功能
2020/06/30 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
python k-近邻算法实例分享
2014/06/11 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
图解Python变量与赋值
2018/04/03 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
工商企业管理应届生求职信
2013/11/03 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
春季防火方案
2014/05/10 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
证婚人婚礼致辞
2015/07/28 职场文书