原生JS实现表单正则验证与提交控制
作者：小括号时间：2026-10-24 10:35:44浏览：483
本文介绍使用原生JavaScript实现表单的正则验证功能，涵盖用户名、邮箱及密码的实时校验逻辑。重点解析中文双字符处理、密码强度判断及全数字/字符检测，并通过验证标识符机制控制提交按钮状态，确保所有条件满足后方可提交。
本文实现了以下功能：
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})$/g3. 判断是否全为相同字符的方法：
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实现表单正则验证（验证通过后才可提交）的文章就介绍到这了，更多相关JS表单正则验证内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
作者最新文章
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18