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 asp.net 获取当前超链接中的文本
Apr 14 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
详解JavaScript函数
Dec 01 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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入门源程序
2006/10/09 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
初识PHP
2014/09/28 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Django 静态文件配置过程详解
2019/07/23 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Python通过Pillow实现图片对比
2020/04/29 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
设备技术员岗位职责
2015/04/11 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS