用户注册表单验证

最新推荐文章于 2019-07-15 13:14:39 发布

csdn_今日有雨

最新推荐文章于 2019-07-15 13:14:39 发布

阅读量9.6k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： html javascript 文章标签： javascript 正则表达式表单

本文链接：https://blog.youkuaiyun.com/csdn_wyl/article/details/48416453

html 同时被 2 个专栏收录

3 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文介绍了如何使用JavaScript进行用户注册表单的验证，包括文本框、单选按钮和复选框的验证。通过正则表达式进行文本框内容的合法性检查，并展示了关键的JavaScript代码和HTML结构，以帮助提升JavaScript实战技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大概是一些文本框的验证，单选按钮，复选框的验证，通过表单名字获取表单，再调用表单里的内容。验证文本框用正则表达式。通过这次练习，增加了对javascript运用的熟练程度。
效果图
这里写图片描述

步骤

重要代码截图
文本框

单选

复选

验证所有

js代码

<script>
    //页面加载函数
    function iniState()
    {
        //默认获得输入焦点
        document.getElementById("txt_Uname").focus();
        //获得随机数
        getValidateCode();  
    }
    //生成四位随机数
    function getValidateCode()
    {
        var vCode = "0000";
        vCode = String(Math.round(Math.random()*10000));    
        while(vCode.length<4)
        {
            vCode = "0" + vCode;
        }
        //将vCode放入lable中显示在页面上
        document.getElementById("vCode").innerHTML=vCode;
    }
    //显示公用方法
    //显示错误信息div方法
    /*
    说明：显示错误信息函数
    参数 eId：要显示div的id
    参数 msg：要显示的信息内容
    */
    function showErrorMsg(eId,msg){
        document.getElementById(eId).innerHTML = msg;
        document.getElementById(eId).style.display = "";
    }   
    //隐藏错误信息div方法
    /*
    说明：隐藏错误信息函数
    参数eId：要隐藏的div的id
    */
    function clearMsg(eId){
        document.getElementById(eId).style.display = "none";    
    }
    //失去焦点事件
    /*
    用户名
    失去焦点时验证是否符合规则
    参数UName：用户输入的用户名
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyUName(UName,eId){
        var msg = "";
        var strUserName = UName.trim();
        //用户名必须6~20位.
        if(strUserName.length < 6 || strUserName.length > 20 ){
            msg = "<font color='red'>用户名必须6~20位</font>";
            showErrorMsg(eId,msg);
            return false;
        }
        //使用正则表达式验证
        var pattern = /^[a-zA-Z]{1}[a-zA-Z0-9_]{5,19}$/
        if(pattern.test(strUserName)){
            clearMsg(eId);
            return true;
        }else{
            msg = "<font color='red'>用户名输入错误</font>";   
            showErrorMsg(eId,msg);
            return false;
        }
    }
    /*
    密码
    失去焦点时验证是否符合规则
    参数UPass：用户输入的密码
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyPass(pwd,eId){
        var msg = "";
        var strPwd = pwd.trim();
        //密码必须6~20位.
        if(strPwd.length < 6 || strPwd.length > 20 ){
            msg = "<font color='red'>密码必须6~20位</font>";
            showErrorMsg(eId,msg);
            return false;
        }
        //使用正则表达式验证
        var pattern = /^[a-zA-Z0-9]{0,19}$/;
        if(pattern.test(strPwd)){
            clearMsg(eId);
            return true;
        }else{
            msg = "<font color='red'>密码格式不错误</font>";   
            showErrorMsg(eId,msg);
            return false;
        }   
    }
    /*
    重复密码
    失去焦点时验证是否符合规则
    参数UPass：用户输入的密码
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyRePass(pwd,pwd1,eId){
        var msg = "";
        var strPwd1 = pwd.trim();
        var strPwd2 = pwd1.trim();
        //密码必须6~20位.
        if(strPwd1 != strPwd2){
            msg = "<font color='red'>两次密码输入不一致</font>";
            showErrorMsg(eId,msg);
            return false;
        }else{
            clearMsg(eId);
            return true;    
        }   
    }

    /*
    问题答案
    失去焦点时验证是否符合规则
    参数answer：用户输入答案
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyAnswer(answer,eId){
        var msg = "";
        var strAnswer = answer.trim();
        //答案必须6~20位.
        if(strAnswer.length < 3 || strAnswer.length > 32){
            msg = "<font color='red'>答案必须3~32位.</font>";
            showErrorMsg(eId,msg);
            return false;
        }
        var pattern = /^([\u4E00-\u9FA5]|\w)*$/;
        if(pattern.test(strAnswer)){
            clearMsg(eId);
            return true;    
        }else{
            msg = "<font color='red'>不能包含特殊字符</font>";
            showErorrMsg(msg,eId);  
            return false;
        }
    }
    /*
    单选
    提交时是否符合规则
    参数radioName：一组单选按钮的name
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyRidio(radioName,eId){
        var ridioName = document.getElementsByName(radioName);
        for(var i=0;i<2;i++){
            if(ridioName[i].checked){
                return true;
            }
        }
        msg = "<font color='red'>请选择</font>";
        showErrorMsg(eId,msg);
        return false;
    }
    /*
    邮箱
    失去焦点时验证是否符合规则
    参数mail：用户输入的邮箱
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyMail(mail,eId){
        var msg = "";
        var strMail = mail.trim();
        //密码必须6~20位.
        if(strMail.length < 6){
            msg = "<font color='red'>邮箱最少5位以上</font>";
            showErrorMsg(eId,msg);
            return false;
        }
        //使用正则表达式验证邮箱
        var pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(pattern.test(strMail)){
            clearMsg(eId);
            return true;
        }else{
            msg = "<font color='red'>邮箱格式不错误</font>";   
            showErrorMsg(eId,msg);
            return false;
        }
    }
    /*
    验证码
    失去焦点时验证是否符合规则
    参数shuRu：用户输入的验证码
    参数suiJi：随机产生的验证码
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyValidateCode(shuRu,vCode,eId){
        var msg = "";
        var strShuRu = shuRu.trim();
        var suiJi = document.getElementById(vCode).innerHTML;
        //判断是否相等
        if(strShuRu != suiJi){
            msg = "<font color='red'>验证码不正确</font>";
            showErrorMsg(eId,msg);
            return false;
        }
        else{
            clearMsg(eId);
            return true;
        }
    }
    /*
    接受条款
    提交时验证是否选中
    参数checkName：复选框的name
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyChecked(checkName,eId){
        var checkName = document.getElementsByName(checkName);
        if(checkName.checked){
            return true;
        }
        msg = "<font color='red'>请选择</font>";
        showErrorMsg(eId,msg);
        return false;
    }
    /*
    说明：主验证函数：验证所以输入选择是否符合要求
    规则：要求所以验证都符合规则
    返回值：若所以验证都符合：返回true，有一个不通过：返回false
    */
    function verifyInput(){
        //通过表单名称，得到输入表单
        var form = document.form_register;
        //以此验证
        if(verifyUName(form.txt_Uname.value,'div_uname') && 
            verifyPass(txt_Pwd1.value,'div_pwd1') && 
            verifyRePass(txt_Pwd1.value,txt_Pwd2.value,'div_pwd2') && 
            verifyAnswer(txt_Answer.value,'div_answer') && 
            verifyRidio('radio_name','div_ridio') && 
            verifyMail(txt_Mail.value,'div_mail') && 
            verifyValidateCode(txt_YanZheng.value,'vCode','div_validateCode') 
            && verifyChecked('check_name','div_check')){
            alert("恭喜，注册成功");
            form.submit;
            return(true);
        }else{
            alert("注册失败，请安红色提示修改"); 
            return(false);
        }   
    }
</script>

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#font {
    color: #CDCDCD;
}
</style>
<script>
    //页面加载函数
    function iniState()
    {
        //默认获得输入焦点
        document.getElementById("txt_Uname").focus();
        //获得随机数
        getValidateCode();  
    }
    //生成四位随机数
    function getValidateCode()
    {
        var vCode = "0000";
        vCode = String(Math.round(Math.random()*10000));    
        while(vCode.length<4)
        {
            vCode = "0" + vCode;
        }
        //将vCode放入lable中显示在页面上
        document.getElementById("vCode").innerHTML=vCode;
    }
    //显示公用方法
    //显示错误信息div方法
    /*
    说明：显示错误信息函数
    参数 eId：要显示div的id
    参数 msg：要显示的信息内容
    */
    function showErrorMsg(eId,msg){
        document.getElementById(eId).innerHTML = msg;
        document.getElementById(eId).style.display = "";
    }   
    //隐藏错误信息div方法
    /*
    说明：隐藏错误信息函数
    参数eId：要隐藏的div的id
    */
    function clearMsg(eId){
        document.getElementById(eId).style.display = "none";    
    }
    //失去焦点事件
    /*
    用户名
    失去焦点时验证是否符合规则
    参数UName：用户输入的用户名
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyUName(UName,eId){
        var msg = "";
        var strUserName = UName.trim();
        //用户名必须6~20位.
        if(strUserName.length < 6 || strUserName.length > 20 ){
            msg = "<font color='red'>用户名必须6~20位</font>";
            showErrorMsg(eId,msg);
            return false;
        }
        //使用正则表达式验证
        var pattern = /^[a-zA-Z]{1}[a-zA-Z0-9_]{5,19}$/
        if(pattern.test(strUserName)){
            clearMsg(eId);
            return true;
        }else{
            msg = "<font color='red'>用户名输入错误</font>";   
            showErrorMsg(eId,msg);
            return false;
        }
    }
    /*
    密码
    失去焦点时验证是否符合规则
    参数UPass：用户输入的密码
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyPass(pwd,eId){
        var msg = "";
        var strPwd = pwd.trim();
        //密码必须6~20位.
        if(strPwd.length < 6 || strPwd.length > 20 ){
            msg = "<font color='red'>密码必须6~20位</font>";
            showErrorMsg(eId,msg);
            return false;
        }
        //使用正则表达式验证
        var pattern = /^[a-zA-Z0-9]{0,19}$/;
        if(pattern.test(strPwd)){
            clearMsg(eId);
            return true;
        }else{
            msg = "<font color='red'>密码格式不错误</font>";   
            showErrorMsg(eId,msg);
            return false;
        }   
    }
    /*
    重复密码
    失去焦点时验证是否符合规则
    参数UPass：用户输入的密码
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyRePass(pwd,pwd1,eId){
        var msg = "";
        var strPwd1 = pwd.trim();
        var strPwd2 = pwd1.trim();
        //密码必须6~20位.
        if(strPwd1 != strPwd2){
            msg = "<font color='red'>两次密码输入不一致</font>";
            showErrorMsg(eId,msg);
            return false;
        }else{
            clearMsg(eId);
            return true;    
        }   
    }

    /*
    问题答案
    失去焦点时验证是否符合规则
    参数answer：用户输入答案
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyAnswer(answer,eId){
        var msg = "";
        var strAnswer = answer.trim();
        //答案必须6~20位.
        if(strAnswer.length < 3 || strAnswer.length > 32){
            msg = "<font color='red'>答案必须3~32位.</font>";
            showErrorMsg(eId,msg);
            return false;
        }
        var pattern = /^([\u4E00-\u9FA5]|\w)*$/;
        if(pattern.test(strAnswer)){
            clearMsg(eId);
            return true;    
        }else{
            msg = "<font color='red'>不能包含特殊字符</font>";
            showErorrMsg(msg,eId);  
            return false;
        }
    }
    /*
    单选
    提交时是否符合规则
    参数radioName：一组单选按钮的name
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyRidio(radioName,eId){
        var ridioName = document.getElementsByName(radioName);
        for(var i=0;i<2;i++){
            if(ridioName[i].checked){
                return true;
            }
        }
        msg = "<font color='red'>请选择</font>";
        showErrorMsg(eId,msg);
        return false;
    }
    /*
    邮箱
    失去焦点时验证是否符合规则
    参数mail：用户输入的邮箱
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyMail(mail,eId){
        var msg = "";
        var strMail = mail.trim();
        //密码必须6~20位.
        if(strMail.length < 6){
            msg = "<font color='red'>邮箱最少5位以上</font>";
            showErrorMsg(eId,msg);
            return false;
        }
        //使用正则表达式验证邮箱
        var pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(pattern.test(strMail)){
            clearMsg(eId);
            return true;
        }else{
            msg = "<font color='red'>邮箱格式不错误</font>";   
            showErrorMsg(eId,msg);
            return false;
        }
    }
    /*
    验证码
    失去焦点时验证是否符合规则
    参数shuRu：用户输入的验证码
    参数suiJi：随机产生的验证码
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyValidateCode(shuRu,vCode,eId){
        var msg = "";
        var strShuRu = shuRu.trim();
        var suiJi = document.getElementById(vCode).innerHTML;
        //判断是否相等
        if(strShuRu != suiJi){
            msg = "<font color='red'>验证码不正确</font>";
            showErrorMsg(eId,msg);
            return false;
        }
        else{
            clearMsg(eId);
            return true;
        }
    }
    /*
    接受条款
    提交时验证是否选中
    参数checkName：复选框的name
    参数eId：错误提示div的id
    返回值：若符合要求：返回true，不符合：返回false；
    */
    function verifyChecked(checkName,eId){
        var checkName = document.getElementsByName(checkName);
        if(checkName.checked){
            return true;
        }
        msg = "<font color='red'>请选择</font>";
        showErrorMsg(eId,msg);
        return false;
    }
    /*
    说明：主验证函数：验证所以输入选择是否符合要求
    规则：要求所以验证都符合规则
    返回值：若所以验证都符合：返回true，有一个不通过：返回false
    */
    function verifyInput(){
        //通过表单名称，得到输入表单
        var form = document.form_register;
        //以此验证
        if(verifyUName(form.txt_Uname.value,'div_uname') && 
            verifyPass(txt_Pwd1.value,'div_pwd1') && 
            verifyRePass(txt_Pwd1.value,txt_Pwd2.value,'div_pwd2') && 
            verifyAnswer(txt_Answer.value,'div_answer') && 
            verifyRidio('radio_name','div_ridio') && 
            verifyMail(txt_Mail.value,'div_mail') && 
            verifyValidateCode(txt_YanZheng.value,'vCode','div_validateCode') 
            && verifyChecked('check_name','div_check')){
            alert("恭喜，注册成功");
            form.submit;
            return(true);
        }else{
            alert("注册失败，请安红色提示修改"); 
            return(false);
        }   
    }
</script>
</head>

<body onload="iniState()">
<form id="form1" name="form_register" method="post" action="">
  <table width="800" border="0" align="center">
    <tr align="right">
      <th colspan="6" align="center" bgcolor="#abc4e4" scope="col">用户注册</th>
    </tr>
    <tr align="right">
      <td height="1" colspan="6" bgcolor="#abc4e4"></td>
    </tr>
    <tr>
      <td height="50" align="right" width="200">用户名：</td>
      <td width="200" height="50" colspan="3">
        <input name="txt_Uname" type="text" id="txt_Uname" onfocus="clearMsg('div_uname');" onblur="verifyUName(txt_Uname.value,'div_uname');"/>
      </td>
      <td width="200" height="50"><div id="div_uname"></div>&nbsp;</td>
      <td width="200" height="50"><code id="font">英文字母阿拉伯数字下划线组合，长度为6-20位，只能以字母开头</code></td>
    </tr>
    <tr>
      <td height="50" align="right">输入密码：</td>
      <td colspan="3"><input name="txtPwd1" type="password" id="txt_Pwd1" onblur="verifyPass(txt_Pwd1.value,'div_pwd1');" onfocus="clearMsg('div_pwd1');" /></td>
      <td><div id="div_pwd1"></div></td>
      <td rowspan="2"><code id="font">英文字母阿拉伯数字组合，英文区分大小写，长度为6-20位</code></td>
    </tr>
    <tr>
      <td height="50" align="right">验证密码：</td>
      <td colspan="3"><input name="txt_Pwd2" type="password" id="txt_Pwd2" onfocus="clearMsg('div_pwd2')" onblur="verifyRePass(txt_Pwd1.value,txt_Pwd2.value,'div_pwd2');" /></td>
      <td><div id="div_pwd2"></div></td>
    </tr>
    <tr>
      <td height="1" colspan="6" bgcolor="#abc4e4"></td>
    </tr>
    <tr>
      <td height="50" align="right">密码提示问题：</td>
      <td colspan="3"><select>
        <option>你的初恋情人是？</option>
        <option>你的现任男（女）友是？</option>
      </select></td>
      <td>&nbsp;</td>
      <td rowspan="2"><code id="font">当你忘记密码时，可以通过密码提示问题和答案来查询。密码提示答案3-32位之间，不能包含特殊字符</code></td>
    </tr>
    <tr>
      <td height="50" align="right">密码提示答案：</td>
      <td colspan="3"><input name="txt_Answer" type="text" id="txt_Answer" onfocus="clearMsg('div_answer')" onblur="verifyAnswer(txt_Answer.value,'div_answer')"/></td>
      <td><div id="div_answer"></div></td>
    </tr>
    <tr>
      <td height="1" colspan="6" bgcolor="#abc4e4"></td>
    </tr>
    <tr>
      <td height="50" align="right">出生日期：</td>
      <td colspan="4"><select name="select" size="1">
        <option>1992</option>
        <option>1991</option>
        </select>
        年
        <select name="select2" size="1">
          <option>1</option>
          <option>2</option>
        </select>
        月
        <select name="select3" size="1">
          <option>1</option>
          <option>2</option>
        </select>
      日</td>
      <td rowspan="2"><code id="font">为方便您的使用，请填写真实信息</code></td>
    </tr>
    <tr>
      <td height="50" align="right">性别：</td>
      <td colspan="3"><input name="radio_name" type="radio" id="ridio1" value="ridio1" checked="checked" />
      <label for="ridio1">男&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="radio_name" id="ridio2" value="ridio2" />
      女</label></td>
      <td><div id="div_ridio"></div></td>
    </tr>
    <tr>
      <td height="50" align="right">常用邮箱：</td>
      <td colspan="3"><input name="txt_Mail" type="text" id="txt_Mail" onfocus="clearMsg('div_mail')" onblur="verifyMail(txt_Mail.value,'div_mail')"/></td>
      <td><div id="div_mail"></div></td>
      <td><code id="font">方便你取得邮箱账号相关的重要信息，包括找回密码</code></td>
    </tr>
    <tr>
      <td height="1" colspan="6" bgcolor="#abc4e4"></td>
    </tr>
    <tr>
      <td height="50" align="right">请输入验证码：</td>
      <td width="60">
        <input name="txt_YanZheng" type="text" id="txt_YanZheng" onfocus="clearMsg('div_validateCode');" onblur="verifyValidateCode(txt_YanZheng.value,'vCode','div_validateCode');" />
      </td>
      <td><div id="vCode"></div></td>      
      <td><input type="button" value="刷" width="50" onclick="getValidateCode()" /></td>   
      <td><div id="div_validateCode"></div></td>
      <td><code id="font">请将系统产生的四位验证码数字输入到系统验证码的输入框中</code></td>
    </tr>
    <tr>
      <td height="1" colspan="6" bgcolor="#abc4e4"></td>
    </tr>
    <tr>
      <td height="50" align="right">&nbsp;</td>
      <td colspan="3"><input name="check_name" type="checkbox" value="" />
      &nbsp;我已阅读并接受服务条款</td>
      <td><div id="div_check"></div></td>
      <td><code id="font">选择韩子昂服务前，请阅读服务条款</code></td>
    </tr>
    <tr>
      <td height="50" colspan="6" align="center"><input name="" type="submit" value="提交" onclick="verifyInput()" /></td>
    </tr>
    <tr>
      <td height="1" colspan="6" bgcolor="#abc4e4"></td>
    </tr>
  </table>
</form>
</body>
</html>