博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一度让我头大到起飞的表单验证
阅读量:6367 次
发布时间:2019-06-23

本文共 2645 字,大约阅读时间需要 8 分钟。

表单验证在前端开发中非常非常常见,每次有需求时都不得不百度,匆匆忙忙,没有积累,也很零散。今天心血来潮想把它整理出来,有些粗糙,后续会继续修改 ^_^.

step1: 首先定义一个Validator表单验证对象

var Validator = {    isNoEmpty: function(){}, // 判断是否为空    maxlength: function(){}, //最大长度限制    isID: function(){}, // 身份证号码校验    isMobile: function(){}, // 手机号校验    isChineseName: function(){}, //中文名校验    onlyNum: function(){}, // 只能输入两位小数    };

step2: 在对应的HTML页面中使用时,只需要创建这个实例对象,调用对应的方法即可,如下:

var validator = Object.create(Validator); var isMobile = validator.isMobile(mobile, mobile.val(), '请输入正确的手机号码'); var isID = validator.isID(ID, ID.val(), '请输入正确的身份证号码');

step3: 补充Validator对象中的每个校验方法

1. 判断是否为空

三个参数:

element:当前的DOM节点
value: 当前表单中的值
errMsg: 错误提示信息

isNoEmpty: function (element, value, errMsg) {    if(value === ''){      return {        type: 'isEmpty',        errMsg: errMsg      }    }    return true;},

2.最大长度限制

四个参数:

element:当前的DOM节点
value: 当前表单中的值
errMsg: 错误提示信息
length:最大长度值

maxlength: function(element, value, errMsg, length){    if(value.length > length){      return {        type: 'overMaxlength',        errMsg: errMsg      }    }    return true;},

3.身份证号码校验

三个参数:

element:当前的DOM节点
value: 当前表单中的值
errMsg: 错误提示信息

isID: function(element, value, errMsg){    var reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;    if(!reg.test(value)){      return {        type: 'isNoID',        errMsg: errMsg      }    }    return true; },

4.手机号校验

三个参数:

element:当前的DOM节点
value: 当前表单中的值
errMsg: 错误提示信息

isMobile: function(element, value, errMsg){    var reg = /^\\d{11}$/;    if(!reg.test(value)){      return {        type: 'isNoMobile',        errMsg: errMsg      }    }    return true;},

5.中文名校验

三个参数:

element:当前的DOM节点
value: 当前表单中的值
errMsg: 错误提示信息

isChineseName: function(element, value, errMsg){    var reg = /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]){2,}$/;    if(!reg.test(value)){      return {        type: 'isNoChineseName',        errMsg: errMsg      }    }    return true;},

6.只能输入最多含有两位小数的数字

一个参数:

value:当前文本框的值
tips:在调用时可传入this.value,即this.value = validator.onlyNum(this.value)
这样就能保证你修改的就是当前文本框对象的值,因为对象属于引用类型,如果没有深拷贝,则会修改它本身。

onlyNum: function(value){    var newValue = value;    newValue = newValue.replace(/[^\d.]/g,''); // 只留下数字和小数点    newValue = newValue.replace(/\.{2}/g,'.'); // 只保留第一个小数点,清除多余的    newValue = newValue.replace('.','$#$').replace(/\./g,'').replace('$#$','.');    newValue = newValue.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两位小数    if(newValue.indexOf('.')<0 && newValue !=''){      newValue = parseFloat(newValue); // 保证如果没有小数点,首位不能是01,02这种金额出现    }    return newValue;  }

强制数字保留两位小数时,使用toFixed(); 即 var num = parseFloat(num).toFixed()

继续更新中……

转载地址:http://fsrma.baihongyu.com/

你可能感兴趣的文章
javascript类型系统——包装对象
查看>>
Android4.4中不能发送SD卡就绪广播
查看>>
解决:sudo: 无法解析主机:dinphy-500-310cn: 连接超时
查看>>
Asp.Net多线程用法1
查看>>
exFAT是支持Mac和Win的
查看>>
(转)postman中 form-data、x-www-form-urlencoded、raw、binary的区别
查看>>
js Date操作
查看>>
判断用户密码是否在警告期内(学习练习)
查看>>
sp_executesql的执行计划会被重用(转载)
查看>>
禅道项目管理软件插件开发
查看>>
Linux系统各发行版镜像下载
查看>>
JS获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性
查看>>
查看ORACLE 数据库及表信息
查看>>
腾讯、百度、阿里面试经验—(1) 腾讯面经
查看>>
Codeforces Round #374 (Div. 2) D. Maxim and Array 贪心
查看>>
HTML DOM 教程Part1
查看>>
GBDT的基本原理
查看>>
MySQL修改root密码的多种方法(转)
查看>>
MongoDB 基础命令——数据库表的增删改查——遍历操作表中的记录
查看>>
.NET Core 跨平台发布(dotnet publish)
查看>>