程序博客网 > 人工智能利大于弊

简单的JTML+JS验证用户名、电话号码格式_JS自定义function_正则表达式

来源：互联网发布：人工智能利大于弊编辑：程序博客网时间：2024/05/01 11:06

文件：check.js

自定义 checkRegTels(); 传入一个参数，名字是regtels；

function checkRegTels(regtels){                      //此方法在验证电话格式的时候调用
    var str=regtels;                                        //将传入参数赋值给str
   var Expression=/^(\d{4}-)(\d{7})$/;            //定义正则表达式，赋值给Expression
   var objExp=new RegExp(Expression);        //创建RegExp()对象（可百度）
   if(objExp.test(str)==true){                         // if 判断语句， test() 是RegExp对象里的一个方法，表示前后对象是否匹配
        return true;                                       // 如果成功，返回true,否则返回false
    }else{
         return false;
   }
}

function checkForm(form,mark){                       //自定义函数，传入两个参数，第一个是表单名，第二个只是用于分类
    if(mark==0 || mark=="all"){                            //如果传入的参数mark==0或者all，执行以下代码
       if(form.userName.value==""){                            //判断表单userName属性的内容是否等于空
           check_userName.innerHTML="请输入用户名！";            //在id=check_userName的div里输出“请输入用户名！”
           return false;                                                         //返回false，禁止页面提交
       }else{                                                    //其他情况不输出文字（输出空）
           check_userName.innerHTML="";
       }
    }
   if(mark==1 || mark=="all"){
         if(form.userTel.value==""){
              check_userTel.innerHTML="请输入固定电话！";
              return false;
         }else if(!checkRegTels(form.userTel.value)){                    //引用checkRegTels()方法，传入表单中userTel的内容，匹配不成功执行以下代码
              check_userTel.innerHTML="号码格式错误！";
         }else{                                                                           //其他输出空
              check_userTel.innerHTML="";
         }
    }
}

文件名：index.php

<script src="check.js"></script>               //这里调用check.js文件
<body>
   <center>
        <form action="" method="post" name="myForm" onsubmit="return checkForm(myForm,'all')">       //onsubmit表示调用checkForm(),并传入表单名和第二个参数“all”;
              <table border="2" cellpadding="0" cellspacing="0">
                    <tr>
                          <td><div>用户名</div></td>
                          <td><input type="text" name="userName" onblur="checkForm(myForm,0)"></td>      //onblur表示调用checkForm，并传入参数

                              //接着会发生什么，你懂得...
                          <td align="left"><font color="#FF0000">*</font> <div id="check_userName" style="color:#FF0000"></div></td>
                   </tr>
                   <tr>
                          <td><div>固定电话</div></td>
                          <td><input type="text" name="userTel" onblur="checkForm(myForm,1)"></td>
                          <td align="left"><font color="#FF0000">*</font> <div id="check_userTel" style="color:#FF0000"></div></td>
                  </tr>
                  <tr>
                          <td height="30"> </td>
                          <td width="150" height="30"><input type="submit" value="提交">  </td>
                          <td width="343"><input type="reset" value="重置"></td>
                  </tr>
             </table>
       </form>

</center>

</body>

运行结果...

0 0

人工智能利大于弊

人工智能利大于弊

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子意的四字成语懿字取名瑜意意字开头的成语接龙大全集集意字成语开头的成语带反意词的四字词语心什么意什么四字成语词意很难懂的有深意的短句六字字数统计字数统计器字数字数排行榜论文字数 word字数字数查询统计字数 wps字数统计计算字数 word看字数 word字数统计本科论文字数 word统计字数在线字数统计高考作文字数毕业论文字数 word怎么看字数字数统计word 字数统计工具 word查看字数自考论文字数无量寿经字数心经全文字数观无量寿经字数本科毕业论文字数中级职称论文字数大一军训总结1000字数神话故事作文300字数完结txt全本电子书字数排行榜军训个人总结1000字数军训自我鉴定200字数手机word怎么看字数