JavaScript基础教程与应用第七章 表单验证实例
发布时间:2024-03-08 09:03:55浏览次数:21JavaScript 基础教程与应用第七章 表单验证实例内 容:我们这周主要学习课件第七章表单验证实例的相关内容,希望通过下面的内容能使同学们加深对本章相关知识点的理解。知识脉络:1、 长度限制 2、 只能是汉字3、 只能是英文字母 4、 检验时间大小5、 检验两次密码输入是否相同6、 表单不能为空7、 验证手机号8、 邮箱验证重点与难点:1.重点:只能是英文字母,表单不能为空。2.难点:检验两次密码输入是否相同。一、常用 JavaScript 表单验证1、长度限制 <p>1. 长度限制</p><form name=a onsubmit="return test()"> <textarea name="b" cols="40" rows="6" placeholder="不能超过 50 个字符!"></textarea><br /> <input type="submit" name="Submit" value="check"> </form><script language="javascript"> function test() { if(document.a.b.value.length>50) {
alert("不能超过 50 个字符!"); document.a.b.focus(); return false; }} </script>2、只能是汉字<p>2. 只能是汉字 </p><input type="text" onblur="isChinese(this.value)" placeholder="请输入中文!" /><script language="javascript"> function isChinese(obj){ var reg=/^[\u0391-\uFFE5]+$/; if(obj!=""&&!reg.test(obj)){ alert('必须输入中文!');return false; } }</script>3、只能是英文字母<script type="text/javascript">//验证只能是字母function checkZm(zm){ var zmReg=/^[a-zA-Z]*$/; if(zm!=""&&!zmReg.test(zm)){ alert("只能是英文字母!");return false; } } </script>4、检验时间大小<script type="text/javascript">//检验时间大小(与当前时间比较) function checkDate(obj){ var obj_value=obj.replace(/-/g,"/");//替换字符,变成标准格式(检验格式为:'2009-12-10') // var obj_value=obj.replace("-","/");//替换字符,变成标准格式(检验格式为:'2010-12-10 11:12') var date1=new Date(Date.parse(obj_value)); var date2=new Date();//取今天的日期
if(date1>date2){ alert("不能大于当前时间!"); return false; } } </script>5、检验两次密码输入是否相同<script type="text/javascript">function check(){ with(document.all){ if(input1.value!=input2.value) { alert("密码不一致") input1.value = ""; input2.value = ""; } else {alert("密码一致");document.forms[0].submit(); }}} </script>6、表单不能为空<script language="javascript"> function CheckForm(obj) { if (obj.length == 0) { alert("姓名不能为空!"); return false; } return true; alert("姓名不能为空!"); } </script>7、验证手机号<script type="text/javascript">function validatemobile(mobile) { if(mobile.length==0) {
alert('手机号码不能为空!');return false; } if(mobile.length!=11) { alert('请输入有效的手机号码,需是 11 位!');return false; } var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; if(!myreg.test(mobile)) { alert('请输入有效的手机号码!'); return false; } } </script>8、邮箱验证<script language="javascript">function test(obj){//对电子邮件的验证var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;if(!myreg.test(obj)){alert('请输入有效的邮箱!');return false;}}</script>