原生js实现表单的正则验证，所有验证都通过后提交按钮才可用

实现了如下功能：
1.用户名：onfouc显示msg规则；onkeyup计算字符，其中中文为两个字符；onblur，验证是否通过
2.邮箱：onblur 正则匹配，正则是根据自己的需求写的，可以根据个人需求更改
3..密码：onkeyup时显示密码的强弱度，onblur时验证密码，是否为相同字符，是否全字符，或全数字，长度是否符合要求
4.确认密码：验证是否和上一次一致
5.提交按钮只有在全部input验证通过后才有效，否则无效
主要知识点：
1.中文为两个字符：

function getLength(str) {return str.replace(/[^\x00-xff]/g, "xx").length;//x00-xff表示在ascii码中所有的双字节字符，这句话意思是将所有非单字节的字符替换成xx，即两个单字节字符，然后再计算长度
}

2.邮箱验证的正则：

var re_e = /^[\w_\.\-]+@[\w]+.([\w]{2,4})$/g

3.是否全为相同字符：

function findStr(str, n){var temp = 0;for(var i = 0;i<str.length;i++){if(str.charAt(i)==n){temp++:};}
}

4.是否全为数字，是否全为字符

 var　re_n =/[^\d]/g ;if(!re_n.test(str)){//全为数字}var　re_n =/[^\a-zA-Z]/g ;if(!re_n.test(str)){//全为字符}

5.表单验证全部通过按钮才有效，可提交：

//我的处理是，在每一个input中都加入一个验证标识符，例如email_state；另写一个验证的函数，验证这四个input的验证标识符则将按钮设为可点，反之则禁用；再每一次onblur的时候都调用一次这个验证函数。

完整代码如下

function register() {var oName = document.getElementById("name");var count = document.getElementById("count");var psw = document.getElementById("psw");var psw2 = document.getElementById("psw2");var email = document.getElementById("email");var name_msg = document.getElementsByClassName("name_msg")[0];var psw_msg = document.getElementsByClassName("psw_msg")[0];var psw2_msg = document.getElementsByClassName("psw2_msg")[0];var email_msg = document.getElementsByClassName("email_msg")[0];var psw = document.getElementById("psw");var psw2 = document.getElementById("psw2");var intensity = getByClass("intensity")[0].getElementsByTagName("span");var registerbtn = document.getElementById("submit");var oName_state = false;var email_state = false;var psw_state = false;var psw2_state = false;var name_length = 0;oName.onfocus = function() {name_msg.style.display = "inline-block";}oName.onkeyup = function() {count.style.visibility = "visible";name_length = getLength(this.value);count.innerHTML = name_length + "个字符";if (name_length == 0) {count.style.visibility = "hidden";}}oName.onblur = function() {//含有非法字符 不能为空 长度超25 长度少于6个字符var re = /[^\w\u4e00-\u9fa5]/g;if (re.test(this.value)) {name_msg.innerHTML = "<i class='fa fa-close'>含有非法字符</i>";oName_state = false;} else if (this.value == "") {name_msg.innerHTML = "<i class='fa fa-close'>不能为空</i>";oName_state = false;} else if (name_length > 25) {name_msg.innerHTML = "<i class='fa fa-close'>不能超出25个字符</i>";oName_state = false;} else if (name_length < 6) {name_msg.innerHTML = "<i class='fa fa-close'>不能少于6个字符</i>";oName_state = false;} else {name_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";oName_state = true;}checkform();}psw.onfocus = function() {psw_msg.style.display = "inline-block";psw_msg.innerHTML = "<i class='fa fa-lightbulb-o'>6-16个字符，不能单独使用字母、数字或符号</i>"}psw.onkeyup = function() {if (this.value.length > 5) {intensity[1].className = "active";psw2.removeAttribute("disabled");psw2_msg.style.display = "inline-block";} else {intensity[1].className = "";psw2.setAttribute("disabled", "");psw2_msg.style.display = "none";}if (this.value.length > 10) {intensity[2].className = "active";psw2.removeAttribute("disabled");psw2_msg.style.display = "inline-block";} else {intensity[2].className = "";}}psw.onblur = function() {//不能为空 不能相同字符 长度6-16 不能全数字 不能全字母 var m = findStr(psw.value, psw.value[0]);var re_n = /[^\d]/g;var re_t = /[^a-zA-Z]/g;if (this.value == "") {psw_msg.innerHTML = "<i class='fa fa-close'>不能为空</i>";psw_state = false;} else if (m == this.value.length) {psw_msg.innerHTML = "<i class='fa fa-close'>不能为相同字符</i>";psw_state = false;} else if (this.value.length < 6 || this.value.legth > 16) {psw_msg.innerHTML = "<i class='fa fa-close'>长度应为6-16个字符</i>";psw_state = false;} else if (!re_n.test(this.value)) {psw_msg.innerHTML = "<i class='fa fa-close'>不能全部为数字</i>";psw_state = false;} else if (!re_t.test(this.value)) {psw_msg.innerHTML = "<i class='fa fa-close'>不能全部为字母</i>";psw_state = false;} else {psw_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";psw_state = true;}checkform();}psw2.onblur = function() {if (psw2.value != psw.value) {psw2_msg.innerHTML = "<i class='fa fa-close'>两次输入不一致</i>";psw2_state = false;} else {psw2_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";psw2_state = true;}checkform();}email.onblur = function() {var re_e = /^[\w_\-\.]+@[\w]+\.([\w]{2,4})$/g;if (!re_e.test(this.value)) {email_msg.innerHTML = "<i class='fa fa-close'>请输入正确的邮箱格式</i>";;email_state = false;} else {email_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";email_state = true;}checkform();}function checkform() {if (oName_state && oName_state && psw_state && psw2_state) {registerbtn.removeAttribute("disabled");// registerbtn.className+=" "+"readySubmit";$("#submit").addClass("readySubmit");} else {registerbtn.setAttribute("disabled", "");//registerbtn.className = registerbtn.className.replace( new RegExp( "(\\s|^)" + "readySubmit" + "(\\s|$)" ), " " );  // registerbtn.className = registerbtn.className.replace( /(\s|^)readySubmit(\s|$)/g, " " );       $("#submit").removeClass("readySubmit");}}
}function getLength(str) {return str.replace(/[^\x00-xff]/g, "xx").length;
}function findStr(str, n) {var temp = 0;for (var i = 0; i < str.length; i++) {if (str.charAt(i) == n) {temp++;}}return temp;
}

部分html代码

<form id="form"><div class="name-field"><label>用户名</label><input type="text" id="name" autofocus requiered/><span class="msg name_msg"><i class="fa fa-lightbulb-o"> 5-25个字符，1个汉字为两个字符，推荐使用中文会员名</i></span><div id="count">0个字符</div></div><div class="email-field" requiered><label>邮箱</label><input type="text" id="email" /><span class="msg email_msg"></span></div><div class="pwd-field" requiered><label>密码</label><input type="password" id="psw" /><span class="msg psw_msg"></span><div class="intensity"><span class="active">弱</span><span>中</span><span>强</span></div></div><div class="pwd2-field" requiered><label>确认密码</label><input type="password" id="psw2" disabled="" /><span class="msg psw2_msg">请再次输入</span></div><button type="submit" id="submit" disabled="" class="submitBtn">注册</button>
</form>

CSS部分

.name-field {margin-top: 10px
}.email-field {margin-top: 3px
}.pwd-field {margin-top: 10px
}.pwd2-field {margin-top: 10px
}.register label {float: left;width: 80px;margin-right: 10px;text-align: right
}.register .name_msg,
.register .psw_msg,
.register .psw2_msg,
.register .email_msg {margin-left: 10px;display: none
}.intensity,
#count {padding-left: 90px;margin-top: 3px
}#count {visibility: hidden;color: #999;font-size: 12px
}.intensity span {display: inline-block;background: #FBAA51;width: 55px;height: 20px;text-align: center
}.intensity .active {background: rgba(0, 128, 0, 0.61)
}.register .submitBtn {width: 163px;margin: 10px 0 0 90px
}#submit {color: #555
}

原生js实现表单的正则验证，所有验证都通过后提交按钮才可用相关推荐

html 勾选框整体勾选,html勾选框_html5实现表单的复选框验证
摘要腾兴网为您分享:html5实现表单的复选框验证,中日翻译,携程,悟空识字,天气预报等软件知识,以及寻仙答题器,山东省民生警务平台,买车168,关键词优化精灵,文件拷贝工具,自动壁纸,语音播报软件 ...
JS实现自动倒计时30秒后按钮才可用
JS实现自动倒计时30秒后按钮才可用 helloweba.com 作者:月光光时间:2015年08月28日 12:22 标签: javascript 倒计时 WEB开发中经常会用到倒计时来限制用户 ...
angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
【卡法常用 ckl.js 库】： js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度...
[卡法常用js库]: js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度 // +---------------------- ...
table中加表单元素每行怎么验证_Validform 一行代码搞定整站的表单验证 - 文章
Validform 一行代码搞定整站的表单验证,为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符 ...
Html 表单提交【js获取表单提交数据】
Html 原生获取表单提交数据 // 提示框淡入淡出<style type="text/css">.message {display: none;padding: 2 ...
validate.js 插件表单校验
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
用javascript写一个简单的登录表单，包含用户名、密码和手机号码。提交数据时验证用户名、密码和手机号输入格式。
题目:写一个用于登录的表单,包含用户名.密码和手机号码.提交数据的时候,要求验证: 1. 用户名必须输入汉字: 2. 密码总共6位,前2位为字母,后4位为数字: 3. 手机号码符合中国大陆手机号码格式 ...
js实现表单form提交前进行确认提示
在jquery中,可以使用confirm来弹出提示框,实现确认提交.下面小编举例讲解js实现表单form提交前进行确认提示. 工具/原料 js+html 代码编辑器:zend studio 10.0 ...

原生js实现表单的正则验证，所有验证都通过后提交按钮才可用

原生js实现表单的正则验证，所有验证都通过后提交按钮才可用相关推荐

最新文章

热门文章