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学习笔记_安装ActiveMQ

    一.实验环境 1.宿主机OS:Win10 64位 2.虚拟机OS:Ubuntu18.04,虚拟机名称:Ubuntu18VM1,虚拟机IP:192.168.8.25 3.操作账号 :Docker 4.在 ...

  2. Django--form基础

    一.Django--form功能 用户提交数据验证 生成html标签 二.基础实例 需求 利用Djang​o的form功能,接收用户注册信息. urls.py 1 2 3 4 5 from app01 ...

  3. 997D Cycles in product

    传送门 题目大意 https://www.luogu.org/problemnew/show/CF997D 分析 我们发现两棵树互不相关 于是我们可以分别求出两棵树的信息 我们点分,人啊按后设f[i] ...

  4. WebDriverWait等设置等待时间和超时时间

    1.显示等待 等待页面加载完成,找到某个条件发生后再继续执行后续代码,如果超过设置时间检测不到则抛出异常 WebDriverWait(driver, timeout, poll_frequency=0 ...

  5. Servlet中response对象Commit状态的分析

    response是服务端对客户端请求的一个响应,其中封装了响应头.状态码.内容(也就是最终要在浏览器上显示的HTML代码或者其他数据格式)等. 服务端在把response提交到客户端之前,会使用一个缓 ...

  6. [GO]map做函数参数

    package main import "fmt" func test(m map[int]string) { delete(m, ) } func main() { m := m ...

  7. css总结7:盒子模型理解

    1 盒子模型 1.1盒子模型的盒子:     以博客园页面为例: 1.2盒子内部构造:边框(border).内容(content).填充(padding).边界(margin)---CSS盒子模式都具 ...

  8. css总结4:input 去掉外边框,placeholder的字体颜色、字号

    1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...

  9. 使用Boost库(1)

    如何说服你的公司.组织使用Boost库 one of the most highly regarded and expertly designed C++ library projects in th ...

  10. C#操作excel打印

    using System; using System.Data; using System.IO; using System.Runtime.InteropServices; using System ...