JS源代码实现表单验证

今天要用JavaScript正则做一个表单验证

1、首先是HTML结构

 <form action="#">账号：<input type="text" name="user"><span></span><br />密码：<input type="text" name="pass"><span></span><br />邮箱：<input type="text" name="email"><span></span><br /><button>注册</button></form>

//后面的span标签用来显示内容，显示账号正确与否。

2、CSS样式 - 其实也只是给span设置一点点样式即可

  <style>span {color: red}</style>

3、最重要的JS代码

①首先需要先获取我们所要操作的元素对象

        //获取操作对象var frm = document.querySelector('form')var inps = document.querySelectorAll('input')var spans = document.querySelectorAll('span')

②将账号、密码、邮箱分为3个部分书写

账号功能实现

       var q1 = false //账号是否验证成功inps[0].onblur = function () {//获取当前输入框的value值var s1 = this.valuevar reg = /^([0-9]|[a-zA-Z]|[\u4e00-\u9fa5]){2,10}$///判断输入字符串是否符合规则if (reg.test(s1)) {//给输入框的后面提示spans[0].innerHTML = "√"//账号验证成功q1 = true} else {spans[0].innerHTML = "账号输入有误"q1 = false}}

思路：【1】先设置一个布尔值q1用来判断账号是否输入正确，用来验证最后的表格提交

【2】给第一个输入框设置点击事件

【3】s1变量接收输入框的内容

【4】书写正则 ★

账号长度一般为2-10，且内容可以是数字，大小写字母，中文，搭配（）和 | 使用；【】和 - 使用

所以账号（用户）正则为：reg=/^（【0-9】|【a-zA-Z】|【\u4e00-\u9fa5】{2，10}）$/

【5】用正则去验证输入的字符串是否符合规则

验证成功的话：在这账号后面的span标签内添加内容 “ √ ”，表示验证成功

q1=true 表示账号验证成功【作用于后面的表格提交】

验证失败的话：在这账号后面的span标签内添加内容 “ 账号输入错误 ”，表示验证失败

空着的话也算验证失败哦

q1=false 表示账号验证成功【作用于后面的表格提交】

密码功能的实现

var k1 = falseinps[1].onblur = function () {var s1 = this.valuevar reg = /^\w{6,16}$///判断该字符串是否符合正则表达式if (reg.test(s1)) {var a = 0 //数字var b = 0 //小写var c = 0 //大写var d = 0 //下划线//判断当前字符串中是否存在数字if (s1.search(/\d/) != -1) {a = 1}if (s1.search(/[a-z]/) != -1) {b = 1}if (s1.search(/[A-Z]/) != -1) {c = 1}if (s1.search(/_/) != -1) {d = 1}//判断出现了几种字符类型if (a + b + c + d == 1) {spans[1].innerHTML = '密码强度弱，请修改密码'} else if (a + b + c + d == 2) {spans[1].innerHTML = '密码强度中'} else if (a + b + c + d > 2) {spans[1].innerHTML = '强'}//密码验证成功k1 = true} else {spans[1].innerHTML = "密码输入有误"//密码验证失败k1 = false}}

密码部分其实是三部分中最多复杂的部分，其实思路与上方的用户差不多

思路：【1】先设置一个布尔值K1【验证后面的表格提交】

【2】s1获取输入框的内容

【3】密码为数字，字母，下划线都行，所以正则比较简单，长度为6-16位

正则：reg = /^\w{6,16}$/

【4】正则验证密码是否成功

用a,b,c,d表示分别记录数字，小写字母，大写字母，下划线是否出现

【5】查询一下当前字符串是否有数字，大写字母，小写字母，下划线，有的话为1，没有则还是为0

【6】a+b+c+d的值用来判断密码的强弱（1种类型为弱，2种类型为种，大于2为强）

将这些内容写进密码后面的span内容中

k1=true

验证失败的话：span内容写上“密码输入有误”

k1=false

邮箱验证

var e1=false
inps[2].onblur = function () {var s1 = this.valuevar reg = /^[1-9a-zA-Z_]\w{5,9}@(qq|163)\.(com|cn)$///验证if (reg.test(s1)) {spans[2].innerHTML = "√"e1 = true} else {spans[2].innerHTML = '邮箱格式有误'e1 = false}}

邮箱思路与上面差不多，记得布尔值

最后的表单验证

//给表单绑定提交事件frm.onsubmit=function(){if(q1 && k1 && e1){return true}else{return false }}

如果前三项都为true的时候才能提交，如果其中一项为false的话，则提交不了

效果：

JS源代码实现表单验证相关推荐

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
JS(DOM对象表单验证与正则表达)
目录 DOM对象表单验证 DOM对象 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
JS常用的表单验证（数字、长度,汉字，邮箱，手机号，身份证等）
1.英文字母 >>jsp,html语句 <input type="text" οnblur="checkChart(this.value)" ...
表单必填标星_怎么用JS做form表单验证，要详细代码，求救！（带星号的是必填项）...
匿名用户 1级 2014-06-17 回答举个例子吧: <input type="text" id="telephone" > <input ...
企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证
引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, ...
JS常用正则表达式表单验证代码大汇总
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证首先,是html部分新用户注册基本信息用户名: 请输入至少3位的用户名密码: 请输入4到8位的密码确认密码: 请再输入一遍密码手机号码: 请输入11位手机号 ...
js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
js 常用正则表达式表单验证代码
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...

JS源代码实现表单验证

JS源代码实现表单验证相关推荐

最新文章

热门文章