正则表单验证

wendongsheng1

于 2022-08-08 17:15:04 发布

阅读量449

点赞数 1

文章标签： servlet html 前端

本文链接：https://blog.csdn.net/c_l_a_n_n_d/article/details/126231763

版权

<style>

body {

background-color: #ccc;

}

form {

width: 1000px;

margin: 0 auto;

}

span {

color: #ff0;

}

#submit {

width: 100px;

margin-left: 100px;

margin-top: 10px;

}

</style>

</head>

<body>

&emsp;用户名：<input type="text" id="name" name="name"><span

id="namea">用户名由英文字母和数字组成的4-16位字符,以字母开头密码由英文字母和数字组成的4-10位字符</span><br>

&emsp;&emsp;密码：<input type="password" id="password" name="password"><span

id="passworda">密码由英文字母和数字组成的4-10位字符</span><br>

确认密码：<input type="password" id="password1" name="password1"><span id="password1a">确认密码与密码保持—致</span><br>

电子邮箱：<input type="text" id="email" name="email"><span id="emaila"></span><br>

手机号码：<input type="text" id="number" name="number"><span id="numbera"></span><br>

&emsp;&emsp;生日：<input type="text" id="date" name="date"><span id="datea"></span><br>

</form>

</body>

var _name = document.getElementById('name'),

_password = document.getElementById('password'),

_password1 = document.getElementById('password1'),

_email = document.getElementById('email'),

_number = document.getElementById('number'),

_date = document.getElementById('date'),

nameflag = false, passwordflag = false, password1flag = false, emailflag = false, numberflag = false, dateflag = false;

_name.onblur = function () {

var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;

if (reg.test(_name.value) == false) {

namea.innerHTML = '用户名格式不正确'

namea.style.color = 'red';

return nameflag = false;

} else {

namea.innerHTML = '用户名正确';

namea.style.color = '#0F0';

return nameflag = true;

}

_password.onblur = function () {

var reg = /^[a-zA-Z0-9]{4,10}/;

if (reg.test(_password.value) == false) {

passworda.innerHTML = '密码格式不正确'

passworda.style.color = 'red';

return passwordflag = false;

} else {

passworda.innerHTML = '密码正确';

passworda.style.color = '#0F0';

return passwordflag = true;

}

_password1.onblur = function () {

if (_password1.value != _password.value) {

password1a.innerHTML = '两次密码不一致'

password1a.style.color = 'red';

return password1flag = false;

} else {

password1a.innerHTML = '两次密码一致';

password1a.style.color = '#0F0';

return password1flag = true;

}

_email.onblur = function () {

var reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

if (reg.test(_email.value) == false) {

emaila.innerHTML = 'email格式不正确'

emaila.style.color = 'red';

return emailflag = false;

} else {

emaila.innerHTML = 'email正确';

emaila.style.color = '#0F0';

return emailflag = true;

}

_number.onblur = function () {

var reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;

if (reg.test(_number.value) == false) {

numbera.innerHTML = '手机号格式不正确'

numbera.style.color = 'red';

return numberflag = false;

} else {

numbera.innerHTML = '手机号正确';

numbera.style.color = '#0F0';

return numberflag = true;

}

_date.onblur = function () {

var reg = /^(1[0-2]|0?[1-9])(-)(0?[1-9]|[1-2]\d|30|31)$/;

if (reg.test(_date.value) == false) {

datea.innerHTML = '日期格式不正确'

datea.style.color = 'red';

return dateflag = false;

} else {

datea.innerHTML = '';

return dateflag = false;

}

function a() {

if (nameflag == false && passwordflag == false && password1flag == false && emailflag == false && numberflag == false && dateflag == false) {

alert("请重新检查表单");

return false;

} else {

alert('提交成功')

}

</script>

wendongsheng1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
正则表单验证

正则表单验证确认密码与密码保持—致电子邮箱：生日：
复制链接

扫一扫

正则表单验证

“相关推荐”对你有帮助么？