JavaScript 正则表达式表单验证

案例:表单验证

Html

<body onload="loading()"><h1>欢迎来到***注册页面</h1><form onsubmit="return testSub()" onreset="return testReset()"><table border="1" cellspacing="0" height="360px" width="500px"><tr><td>用户名</td><td><input type="text" id="uname" name="uname" onblur="testUserName()"/><span id="unameSpan" name="myspan"></span><!--name="myspan" 的用来重置清空的--></td></tr><tr><td>密码</td><td><input type="password" id="pwd" name="pwd" onblur="testPwd()"/><span id="pwdSpan" name="myspan"></span></td></tr><tr><td>确认密码</td><td><input type="password" id="chkpwd" onblur="testChkPwd()" /><span id="chkpwdSpan" name="myspan"></span></td></tr><tr><td>性别</td><td><input type="radio" name="gender" value="0" checked="true">男<input type="radio" name="gender" value="1">女</td></tr><tr><td>爱好</td><td><input type="checkbox" name="fav" value="0" />吃鸡<input type="checkbox" name="fav" value="0" />王者<input type="checkbox" name="fav" value="0" />lol</td></tr><tr><td>手机号</td><td><input type="text" id="phone" onblur="testPhone()"/><span id="phoneSpan" name="myspan"></span></td></tr><tr><td></td><td></td></tr><tr><td>住址</td><td><select id="addr" onchange="testAddr()"><option value="">---请选择---</option><option value="0">天河区</option><option value="0">海珠区</option><option value="0">越秀区</option><option value="0">花都区</option></select><span id="addrSpan"></span></td></tr><tr><td>验证码</td><td><input type="text" id="chknum" onblur="testCheckNum()"/><span id="chkNum"></span><!--验证码--><span id="chk" name="myspan"></span><!--提示--></td></tr><tr><td colspan="2" align="center"><input type="checkbox" onclick="testAgree()" id="agree"/>遵守协议</td></tr><tr><td colspan="2" align="center"><input type="submit" value="注册" disabled="disabled" id="sub"/><input type="reset" value="重置" /></td></tr></table></from></body>

JavaScript

<style>.redSpan{color:red;}.greenSpan{color:green;}
</style>
<script type="text/javascript">function $(id){return document.getElementById(id);}// 用户名校验function testUserName(){// 定义一个正则表达式,要求:6-8位字符var regex = /^\w{6,8}$/;return checkFiled('uname',regex);}// 密码校验function testPwd(){// 定义一个正则表达式,要求:6-8位数字var regex = /^\d{6,8}$/;checkFiled('pwd',regex);// 在录入了确认密码框,然后再录入密码的时候进行的校验:testChkPwd();}// 手机号验证function testPhone(){// 定义一个正则表达式,var regex = /^1[3456789]\d{9}$/;return checkFiled('phone',regex);}//function checkFiled(id,regex){// 获取文本框中录入的数据var a=$(id).value;// 获取提示框的区域var s=$(id+'Span');// 开始校验:if(a.length == 0){ // 录入数据为空s.innerHTML="*";s.className="redSpan";return false;}else if(regex.test(a)){ // 录入数据不为空,并且录对了s.innerHTML="√";s.className="greenSpan";return true;}else{// 录入数据不空,并且录错了s.innerHTML="×";s.className="redSpan";return false;}}function testChkPwd(){// 获取密码的内容var oldPwd = $('pwd').value;// 获取确认密码框中的内容var newPwd = $('chkpwd').value;// 获取确认密码后的提示区域,span:var s = $('chkpwdSpan');// 开始校验if(newPwd.length == 0){ // 录入数据为空s.innerHTML="*";s.className="redSpan";return false;}else if(oldPwd===newPwd){ // 录入数据不为空,并且录对了s.innerHTML="√";s.className="greenSpan";return true;}else{// 录入数据不空,并且录错了s.innerHTML="×";s.className="redSpan";return false;}}function testAddr(){//获取选择的valuevar v= $('addr').value;if(v==""){$('addrSpan').innerHTML="*";$('addrSpan').className="redSpan";return false;}else{$('addrSpan').innerHTML="√";$('addrSpan').className="greenSpan";return true;}}function loading(){// 生成一个4位数的验证码var num = parseInt(Math.random()*9000)+1000;// 将验证码添加到span中$('chkNum').innerHTML=num;}function testCheckNum(){// 获取验证码文本框的内容var oldNum = $('chknum').value;// 获取页面加载生成的验证码:内容var newNum = $('chkNum').innerHTML;// 获取验证码后的提示区域:span:var s =$('chk');// 开始校验if(oldNum.length == 0){s.innerHTML="*";s.className="redSpan";return false;}else if(oldNum===newNum){s.innerHTML="√";s.className="greenSpan";return true;}else{s.innerHTML="×";s.className="redSpan";return false;}}function testAgree(){// 获取选中框var a = $('agree');// 获取提交按钮var b = $('sub');// 如果选中,提交按钮就好使,如果不选中,提交按钮就不好使b.disabled= !a.checked;}function testSub(){var uname = testUserName();var pwd = testChkPwd();var phone = testPhone();var chkNum = testCheckNum();var addr = testAddr();return uname && pwd && phone && chkNum && addr;}function testReset(){// 是否重置var flag = window.confirm('确认要重置吗?');if(flag){ //确认重置var spans = document.getElementsByName('myspan');//获取的是集合for(var i=0;i<spans.length;i++){spans[i].innerHTML="";}return true;}else{return false;}}
</script>

JavaScript 正则表达式表单验证相关推荐

第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全...
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全效果图 html <div id="reg"><h2 class= ...
JavaScript常用表单验证
JavaScript常用表单验证目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判 ...
JavaScript - JavaScript通用表单验证函数(实例)
Check.js JS函数文件 /* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素. ...
JS常用正则表达式表单验证代码大汇总
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
js 常用正则表达式表单验证代码
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
JavaScript通用表单验证函数
表单定义: < form name = " form1 " action = "" style = " behavior:url('form ...
java qq验证手机号码_java正则表达式表单验证类工具类(验证邮箱、手机号码、qq号码等)...
package util; import java.util.regex.Matcher; import java.util.regex.Pattern; /** * 使用正则表达式进行表单验证 * ...
html正则表达式表单验证,js正则表达式验证表单【完整版】
效果图: 图(1)初始图图(2)填入信息校验代码如下: 完整验证表单 *{margin: 0;padding: 0;list-style:none;} body{background:#ccc;} ...
JavaScript的表单验证
1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert("不能超过50个字 ...

JavaScript 正则表达式表单验证

JavaScript 正则表达式表单验证相关推荐

最新文章

热门文章