一度让我头大到起飞的表单验证

raise_yang 发布于2019-08-22 18:12 / 1295人阅读

摘要：表单验证在前端开发中非常非常常见，每次有需求时都不得不百度，匆匆忙忙，没有积累，也很零散。只留下数字和小数点只保留第一个小数点，清除多余的只能输入两位小数保证如果没有小数点，首位不能是，这种金额出现强制数字保留两位小数时，使用即继续更新中

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

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+).(dd).*$/, "$1$2.$3"); // 只能输入两位小数
    if(newValue.indexOf(".")<0 && newValue !=""){
      newValue = parseFloat(newValue); // 保证如果没有小数点，首位不能是01，02这种金额出现
    }
    return newValue;
  }

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

继续更新中……

私有云云服务器提示，html5的表单验证验证表单表单验证表单验证代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95617.html

lnmp环境下使用workerman报502 Bad Gateway

摘要：今天使用做聊天室功能的时候遇到一个问题，我用集成包重新安装了系统环境比较方便，然后和以前一样帮虚拟机等都配置好了，进入开发模式，可是当我启动以后，去访问聊天室报网关错误这我头大了，以前用好好的，这次怎么遇到问题了，不过没关系我们来检查下因为今天使用workerman做聊天室功能的时候遇到一个问题，我用集成包重新安装了系统环境（比较方便），然后和以前一样帮虚拟机等都配置好了，进入开发模...

elisa.yang 2019-07-25 13:44 评论0 收藏0
lnmp环境下使用workerman报502 Bad Gateway

摘要：今天使用做聊天室功能的时候遇到一个问题，我用集成包重新安装了系统环境比较方便，然后和以前一样帮虚拟机等都配置好了，进入开发模式，可是当我启动以后，去访问聊天室报网关错误这我头大了，以前用好好的，这次怎么遇到问题了，不过没关系我们来检查下因为今天使用workerman做聊天室功能的时候遇到一个问题，我用集成包重新安装了系统环境（比较方便），然后和以前一样帮虚拟机等都配置好了，进入开发模...

Pluser 2019-06-27 14:02 评论0 收藏0
基于 vue-cli 的前端项目的自动发布预览环境

摘要：就是在提测前部署一个预览环境，在提测前，每个人本地验证一遍，再放在预览环境验证一遍。于是就准备啪啪啪撸一个完成自动发布预览环境的工具。用来直接把已经好的文件发布到预览环境。这样以后组里的其他同事也都可以用一行命令自己部署预览环境了。场景进入公司一段时间了。流程还是不太让人省心。就在上个提测版本的质量还是没法保证，总是或多或少出现一些问题。于是就想到了上家公司的一个做法。就是在提测前...

ctriptech 2019-08-21 18:43 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

you_De 2019-08-29 12:34 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

lwx12525 2019-08-20 16:35 评论0 收藏0