简单正则验证
发布时间：2020-12-14 06:10:18 所属栏目：百科 来源：网络整理
导读：!DOCTYPE html html ????head ????????meta charset="UTF-8" ????????title/title ????/head ????body ????????form action="ok.html" ????????????用户名: input type="text" id="t1" /span id="s1"/spanbr ????????????密码 ： input type="password" id="
|
<!DOCTYPE html>
<html>
????<head>
????????<meta charset="UTF-8">
????????<title></title>
????</head>
????<body>
????????<form action="ok.html">
????????????用户名: <input type="text" id="t1" /><span id="s1"></span><br>
????????????密码 ： <input type="password" id="t2" /><span id="s2"></span><br>
????????????确认密码 ：<input type="password" id="t3" /><span id="s3"></span><br>
????????????爱好 ：
????????????????<input type="checkbox" name="ck"/> 学习
????????????????<input type="checkbox" name="ck"/> 游戏
????????????????<input type="checkbox" name="ck"/> 唱歌<br>
????????????<input type="submit" value="提交"/>
????????</form>
????</body>
</html>
<script src="../public.js"></script>
<script>
????//用户名 ： 合法的手机号
????//密码 ： 不能少于6位
????//确认密码 ： 和密码一致
????//爱好 ： 至少选择两项
????var oForm = document.querySelector("form");
????//验证用户名是否合法 失去焦点验证
????var flagName = null;
????$id("t1").onblur = function(){
????????var reg = /^1[3587]d{9}$/;
????????var str = this.value;
????????if( reg.test(str) ){// 合法
????????????$id("s1").innerHTML = "正确";
????????????flagName = true;
????????}else{
????????????$id("s1").innerHTML = "请输入合法的手机号";
????????????flagName = false;
????????}
????}
????//验证密码
????var flagPwd = null;
????$id("t2").onblur = function(){
????????var reg = /^.{6,}$/;
????????var str = this.value;
????????if( reg.test( str ) ){
????????????$id("s2").innerHTML = "正确";
????????????flagPwd = true;
????????}else{
????????????flagPwd = false;
????????????$id("s2").innerHTML = "密码不能少于6位";
????????}
????}
????//确认密码
????var flagQpwd = null;
????$id("t3").onblur = function(){
????????var str = this.value;//确认密码
????????var strOld = $id("t2").value;
????????if( str == strOld ){
????????????$id("s3").innerHTML = "正确";
????????????flagQpwd = true;
????????}else{
????????????flagQpwd = false;
????????????$id("s3").innerHTML = "两次密码不一致";
????????}
????}
????//定义一个函数 判断复选框是否选择两个以上 如果满足两个以上被选中 返回true 否则返回false
????function checkHobby(){
????????var cks = document.getElementsByName("ck");
????????var count = 0;
????????//遍历所有的复选框 累加被选中的复选框的个数
????????for( var i = 0 ; i < cks.length ; i++ ){
????????????if( cks[i].checked ){
????????????????count++;
????????????}
????????}
????????//循环结束后 判断被选中的复选框的个数是否大于或等于2 满足该条件 就返回true 否则返回false
????????if( count>=2 ){
????????????return true;
????????}else{
????????????return false;
????????}
????}
????oForm.onsubmit = function(){
????????//验证每一个表单项是否符合规范 有一个不符合 return false
????????if( flagName && flagPwd && flagQpwd && checkHobby() ){
????????????return true;
????????}
????????return false;
????}
</script>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |