1, 需求分析

  设计一个通用的表单验证,如果后期表单中添加了更多的需求,不需要更改之前的代码逻辑,最好不要改之前的代码,需要加什么直接加就好了。

2,代码分析

  此表单验证最好返回一个函数,在api设计这块我选择在每个表单项上添加valid属性,在验证中通过查看是否有valid属性、valid属性的内容来获取需要验证的表单,并且返回验证的结果。

  该分析的也分析了,那就开始干吧!!!

  由于重点是表单验证方面,html和css我就能简则简

<form id="login-form">
<p id="errorMsg" style="color:red"></p>
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="button" value="提交" id="btn">
</form>

  按照之前的设计思路,是一个函数,返回验证表单的错误信息,那么参数肯定为要验证的表单

function formCheck(form) {   //参数为要验证的form
let checkResult = [] //存储验证结果的数组
return errorArr //返回该数组
}

 由于我们是通过 表单中我们自己加的属性来判断是否需要验证,那么我们现在在表单中加入这个属性,假设现在username和password需要验证不能为空,username为手机号格式。

  

<input type="text" name="username" id="username" valid="preset,phone">
<input type="password" name="password" id="password" valid="preset">

 

  接着我们上面的formCheck


function formCheck(form) {   //参数为要验证的form
if (!form || !form.elements) { //判断form 以及 form里面是否有表单元素
return
}
let checkResult = [] //存储验证结果的数组
let elements = form.elements //表单元素集合 Array.from(elements).filter(ele => { //这里首先筛选出有valid属性的表单元素
return ele.getAttribute('valid')
}).map(item => { //对每个有valid的表单元素分别操作
let valids = item.getAttribute('valid').split(',') //获取valid属性内容并切割成数组
let errorArr = [] //错误信息数组
valids.forEach(valid => {
if (rules[valid]) {
let result = rules[valid](item.value)
result && errorArr.push(result) //如果不通过我们写的验证规则,那么就将错误信息push到errorArr里面
}
}) if (errorArr.length) { //将每个valid的错误数组push到总的checkResult里面
checkResult.push({
ele: item,
errorArr: errorArr,
message: errorArr[0].message,
type: errorArr[0].type
})
}
})
return checkResult //返回该数组
}
 

  上面的函数中用到了rules,这是我们自己定义的一个验证规则,为一个对象

const rules = {
require (val) {
if (!val.trim()) {
return {
type: 'require',
message: '必填选项'
}
}
},
phone (val) {
let reg = /^1\d{10}$/ //这里手机号的规则写的很简陋,精确的自行百度
if (!reg.test(val)) {
return {
type: 'phone',
message: '手机号格式错误'
}
}
}
}

  至此,一个表单验证的formCheck 就完成了,调用试一试:

<form id="login-form">
<p id="errorMsg" style="color:red"></p>
<input type="text" name="username" id="username" valid="require,phone">
<input type="password" name="password" id="password" valid="require">
<input type="button" value="提交" id="btn">
</form>
<script>
let form = document.getElementById('login-form')
let btn = document.getElementById('btn')
btn.onclick = () => {
let result = formCheck(form)
console.log(result)
}
</script>

  什么都不填直接点击btn结果为:

  

  username随便输一个数字,点击btn结果为:

  返回的结果里,dom元素也有,提示信息也有,我们取到想要的值就可以愉快的进行判断了。

  以后如果需要加一个邮箱的input,valid='email'啥的,  我们直接在rules定义好email这个验证规则,然后就可以直接在input的valid属性上加上email,别的完全不用改。是不是很方便呀

  如果有多个valid,别忘了用逗号分隔哈,因为我们split是根据逗号来的。

  

es6 封装一个基础的表单验证的更多相关文章

  1. 第一百五十四节,封装库--JavaScript,表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  2. 第一百五十节,封装库--JavaScript,表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  3. 第一百五十三节,封装库--JavaScript,表单验证--备注字数验证

    封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...

  4. 第一百五十二节,封装库--JavaScript,表单验证--年月日注入

    封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...

  5. 第一百五十一节,封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全

    封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...

  6. 第一百四十九节,封装库--JavaScript,表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

  7. 一个PHP常用表单验证类(基于正则)

    一个基于正则表达式的PHP常用表单验证类,作者:欣然随风.这个表单判断类的功能有:验证是否为指定长度的字母/数字组合.验证是否为指定长度汉字.身 份证号码验证.是否是指定长度的数字.验证邮件地址.电话 ...

  8. jQuery基础之表单验证

    在使用jquery-validate.js插件时可以做一些初始化配置在初始化jquery-validate.js对象的时候,将外部的一些配置和该插件内部的一些默认配置合并在一起,如果有相同的配置,前者 ...

  9. 网络安全从入门到精通 (第二章-6) 后端基础PHP—表单验证

    本文内容: 什么是表单? 如何创建一个表单: 接收并验证: PHP和数据库交互 1,什么事表单? 表单在网页中主要负责数据采集. 表单由三部分组成: 表单标签:这里面包含了处理表单数据所用动态脚本的U ...

随机推荐

  1. Docker学习笔记_Dockerfile基本知识

    Dockerfile由一行行命令语句组成,并支持以#开头的注释行. 1.编写一个Dockerfile文件 创建一个空的Docker工作目录,进入该目录,使用sudo vim Dockerfile指令新 ...

  2. sql去除重复记录 且保留id最小的 没用

    第一步:查询重复记录   SELECT * FROM TableName   WHERE RepeatFiled IN (   SELECT RepeatFiled   FROM TableName ...

  3. java就业指南 zookeeper分布式系统 zookeeper实现分布式锁 有用

    目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CAP理论告诉我们“任何一个 分布式系统都无法同时满足一致性(Consistency).可用性 ...

  4. linux下方便的录屏命令

    linux下方便的录屏命令   ffmpeg -f x11grab -s 1024*768 -r 20 -i :0.0 -sameq ~/recode.mpg -r后是刷新屏率,   推出直接Ctrl ...

  5. 4.std::string中库函数的使用。

    为了美观,我们把输入和输出设计成如下: #include <iostream> #include <string> int main() { std::string name; ...

  6. Python基础 之 变量、用户交互、if条件语句、while循环语句、编码、逻辑运算

    一.Python介绍 Python 崇尚优美.清晰.简单 Python是一门动态解释型的强制性定义的语言. 二.编译型和解释型的区别 编译型:一次性将所有与程序编译成二进制文件. 缺点:开发效率低,不 ...

  7. 第十九课 pluginlib&Nodelet

    把rgb摄像头的数据转换为laser的时候使用了Nodelet. pluginlib(插件库) 在ros中有一个plugin的包,下面是一个ROS Plugin Registration的例子 上面包 ...

  8. 专题1-MMU-lesson3-MMU配置与使用

    1.段方式MMU 利用虚拟地址然后找到物理地址,通过物理地址访问到led,其过程如下: 一个段的大小是[19:0]总共有1M的地址空间. 从上面可知对应GPIO的段物理基地址是0x7f000000.那 ...

  9. MVC值提供组件ValueProvider的继承关系

    MVC请求过程中中各组件调用顺序:值提供组件(IValueProvider)->模型绑定组件(IModelBinder)->模型验证组件 值提供组件接口 public interface ...

  10. (转)使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    原文地址:http://www.cnblogs.com/huyong/archive/2013/09/24/3334848.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工 ...