js 正则表达式对表单的规则判断（RegExp）

来自前端的小白

已于 2024-02-05 00:06:55 修改

阅读量778

点赞数 8

文章标签： javascript 前端 html

于 2024-02-03 13:49:23 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56493571/article/details/136007292

版权

本文详细描述了一个使用HTML、CSS和JavaScript构建的在线注册表单，涉及用户名、手机号、验证码、密码及二次确认等字段的验证规则，展示了如何利用正则表达式进行有效数据校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//样式

<style>

form {

width: 100%;

margin-left: 500px;

}

.error {

color: red;

}

.next {

margin-left: 50px;

}

</style>

//结构布局

</div>

</div>

<input type="text" name="code" placeholder="短信验证码"><span>发送验证码</span></br>

</div>

</div>

</div>

<input type="checkbox" class="agree"><span>已经阅读并同意用户信息</span></br>

</form>

//js实现功能

const ifo = document.querySelector('.ifo');

const agree = document.querySelector('.agree');

const btn = document.querySelector('.code span');

//验证码

let flg = true;

btn.addEventListener('click', function () {

if (flg) {

flg = false;

let i = 5;

btn.innerHTML = `0${i}秒之后重新获取`

let time = setInterval(function () {

i--

btn.innerHTML = `0${i}秒之后重新获取`;

if (i === 0) {

clearInterval(time);

btn.innerHTML = '重新获取'

flg = true;

}

}, 1000)

}

})

//用户名验证（整个复制用户修改里面的正则判断）

const usName = document.querySelector('[name=name]');

const sq = usName.nextElementSibling.nextElementSibling;

usName.addEventListener('change', verifyName);

function verifyName() {

let regName = /^[a-zA-Z0-9]{6,10}$/;

if (regName.test(usName.value)) {

sq.innerHTML = '';

return true;

} else {

sq.innerHTML = '昵称长度6~10个字符';

return false;

}

//手机号验证

const phone = document.querySelector('[name=phone]');

const sp = phone.nextElementSibling.nextElementSibling;

phone.addEventListener('change', verifyPhone);

function verifyPhone() {

let regPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;

if (regPhone.test(phone.value)) {

sp.innerHTML = '';

return true;

} else {

sp.innerHTML = '请输入正确手机号';

return false;

}

//短信码验证

const code = document.querySelector('[name=code]');

const cods = code.nextElementSibling.nextElementSibling.nextElementSibling;

console.log(cods);

code.addEventListener('change', verifyCode);

function verifyCode() {

let regCode = /^\d{4}$/;

if (regCode.test(code.value)) {

cods.innerHTML = '';

return true;

} else {

cods.innerHTML = '请输入正确验证码';

return false;

}

//密码验证

const pwd = document.querySelector('[name=pwd]');

const pws = pwd.nextElementSibling.nextElementSibling;

pwd.addEventListener('change', verifyPwd);

function verifyPwd() {

let regPwd = /^[a-zA-Z0-9]{6,20}$/;

if (regPwd.test(pwd.value)) {

pws.innerHTML = '';

return true;

} else {

pws.innerHTML = '请输入正确密码';

return false;

}

//密码二次验证

const paw = document.querySelector('[name=paw]');

const pas = paw.nextElementSibling.nextElementSibling;

paw.addEventListener('change', verifyPaw);

//判断现在输入密码的vlue是否等于第一次输入的

function verifyPaw() {

if (paw.value === pwd.value) {

pas.innerHTML = '';

return true;

} else {

pas.innerHTML = '两次密码不一致';

return false;

}

//submit 提交

ifo.addEventListener('submit', function (e) {

//没有勾选不让提交

if (!agree.checked) {

alert('请勾选')

e.preventDefault();

}

//勾选了不符合要求步让提交

if (!verifyName()) e.preventDefault();

if (!verifyPhone()) e.preventDefault();

if (!verifyCode()) e.preventDefault();

if (!verifyPwd()) e.preventDefault();

if (!verifyPaw()) e.preventDefault();

})

</script>