Web前端案例_正则表达式案例

来源：互联网发布：linux网络配置编辑：程序博客网时间：2024/05/22 06:43

Web前端案例_正则表达式案例

这篇写关于一个正则表达式以及表单结合的案例。

1.案例说明

案例：利用正则表达式写一个表单验证
用户名：10-15位的数字或者字母
密码：10-15位的数字或字母
确认密码：判断两次输入的密码是否一致
邮箱：xxx@xxx.(com/cn/net)
提交按钮：必须全部验证成功的情况下，才能成功提交，只要有一个验证失败无法提交

2.实现分析

主要页面就是一个form表单，对于表单中的几个输入值利用正则表达式进行判断，在对应的span标签里面进行提示是否合法，最后利用form表单的onsubmit属性，利用各判断函数返回的布尔值判断是否上传表单信息。

3.实现代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><!--案例：利用正则表达式写一个表单验证用户名：10-15位的数字或者字母密码：10-15位的数字或字母确认密码：判断两次输入的密码是否一致邮箱：xxx@xxx.(com/cn/net)提交按钮：必须全部验证成功的情况下，才能成功提交，只要有一个验证失败无法提交--><body><form action="" onsubmit="return checkAll()" >用户名：<input type="text" id="username" onblur="testUsernamr()" /><span id="usernameSpan"></span><br />密 码：<input type="password" id="password" onblur="testPassworerd()" /><span id="passwordSpan"></span><br />确认密码：<input type="password" id="repassword" onblur="testRepassworerd()" /><span id="repasswordSpan"></span><br />邮箱：<input type="text" id="email" onblur="testEmail()" /><span id="emailSpan"></span><br /><input type="submit" value="提交" /><br /></form></body><script>function testUsernamr(){var reg = /^[0-9a-zA-Z]{10,15}$/;var span = document.getElementById("usernameSpan");var username = document.getElementById("username");if(reg.test(username.value)){span.innerHTML="用户名可用！".fontcolor("green");return true;}else{span.innerHTML="用户名不可用！".fontcolor("red");return false;}}function testPassworerd(){var reg = /^[0-9a-zA-Z]{10,15}$/;var span = document.getElementById("passwordSpan");var password0 = document.getElementById("password");if(reg.test(password0.value)){span.innerHTML="密码格式正确！".fontcolor("green");return true;}else{span.innerHTML="密码格式不正确！".fontcolor("red");return false;}}function testRepassworerd(){var password1 = document.getElementById("password").value;var span = document.getElementById("repasswordSpan");var repassword = document.getElementById("repassword").value;if(password1==repassword){span.innerHTML="密码一致！".fontcolor("green");return true;}else{span.innerHTML="密码不一致！".fontcolor("red");return false;}}function testEmail(){var reg = /^[0-9a-zA-Z]+@[0-9a-zA-Z]+(\.[a-z]{2,3}){1,2}$/;var span = document.getElementById("emailSpan");var email = document.getElementById("email");if(reg.test(email.value)){span.innerHTML="邮箱格式正确！".fontcolor("green");return true;}else{span.innerHTML="邮箱格式不正确！".fontcolor("red");return false;}}function checkAll(){if(testUsernamr()&&testPassworerd()&&testRepassworerd()&&testEmail()){return true;}else{return false;}}</script></html>

4.部分截图

阅读全文

0 0