表单验证javascritpt

案例说明：
自己编写了一个简单的模拟注册的表单，可对表项进行验证和相应提示，规定了用户名格式和密码格式，如果表单必填项没有完成，则注册失败。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证表单</title>
    <audio src="../mp3/Capo%20Productions%20-%20Inspire.mp3" autoplay="autoplay">
    </audio>
    <style type="text/css">
        body{
            background-image: url("../img/c.jpg");
            background-size: 100% 100%;

        }
        table{
            border: 3px gray solid;
        }
    </style>
</head>
<body>
   <form action="#" method="get" onsubmit="return checkForm()">
       <center>
       <caption> <font size="12pt">信息注册</font></caption>
       <table border="1" cellspacing="0" cellpadding="20px" width="600px" height="200px">
           <tr>
               <td>用户名：</td>
               <td >
                   <input style="width: 200px" type="text" name="username" value="" id="name"  placeholder="4到16位（字母，数字，下划线)" onblur="checkUsername()" />
                   <span id="errorName"></span>
               </td>
           </tr>
           <tr>
               <td>密码：</td>
               <td>
                   <input type="password" name="password" id="key" value="" placeholder="请输入密码6到12数字" onblur="checkPassword()" />
                   <span id="errorKey"></span>
               </td>
           </tr>
           <tr>
               <td>性别：</td>
               <td>
                   <input type="radio" name="sex" value="man" onchange="dx_check()">男
                   <input type="radio" name="sex" value="woman" onchange="">女
               </td>
           </tr>
           <tr>
               <td>年龄：</td>
               <td>
                   <input type="text" name="age" value="" id="age1" placeholder="请输入年龄" onblur="checkAge()"/>
                   <span id="nl"></span>
               </td>
           </tr>
           <tr>
               <td>爱好：</td>
               <td>
                   <input type="checkbox" name="hobby" value="singsong">唱歌
                   <input type="checkbox" name="hobby" value="dance">跳舞
                   <input type="checkbox" name="hobby" value="reading">阅读
                   <span style="color: gray">此选项可不选！</span>
               </td>
           </tr>
           <tr>
               <td>自我简介：</td>
               <td>
                   <textarea cols="50" rows="8" name="descript" id="js" onblur="js_check()"></textarea>
               </td>
           </tr>
           <tr>
               <td colspan="2" align="right">
                   <input type="submit" value="提交" onclick="is_check()"  >
                   <input type="reset" value="重写">
               </td>
           </tr>
       </table>
       </center>
   </form>
</body>
<script type="text/javascript">
    //表单提交的验证
    function checkForm() {
        if(!(checkUsername()&&checkPassword()&&checkAge()&&is_check()&&js_check())){
            alert("注册失败，表单填写不完整！");
        }else{
            alert("注册成功！");
        }
        return checkUsername()&&checkPassword()&&checkAge()&&is_check()&&js_check();
    }
    //验证用户名
    //用户名正则，4到16位（字母，数字，下划线）
    function checkUsername(){
       var username=document.getElementById("name").value;
       var ts = document.getElementById("errorName");
        var regx= /^[a-zA-Z0-9_]{4,16}$/;
        var flag = regx.test(username);
        if(flag){
            ts.innerHTML="<font color='yellow'>用户名规则正确</font><font color='red'>✔</font>";
        }else {
            ts.innerHTML="<font color='yellow'>用户名规则错误</font><font color='red'>✘</font>" ;
        }
        return flag;
    }

    //验证密码
    function checkPassword() {
        var key =document.getElementById("key").value;
        var ts = document.getElementById("errorKey");
        var regx=/^[0-9]{6,12}$/;
        var flag = regx.test(key);
        if(flag){
            ts.innerHTML="<font color='yellow'>密码规则正确</font><font color='red'>✔</font>";
        }else {
            ts.innerHTML="<font color='yellow'>密码规则错误</font><font color='red'>✘</font>";
        }
        return flag;
    }
    //判断性别是否选中
    function is_check() {
        var flag=false;
        var sex= document.getElementsByName("sex");
        for (var i=0;i<sex.length;i++){
            if(sex[i].checked){
                flag=true;
            }
        }
        return flag;
    }
    //验证年龄
    //合法年龄为 0-100岁之间
    function checkAge() {
        var age = document.getElementById("age1").value;
        var ts = document.getElementById("nl");
        var regx=/^[0-9]{1,2}$/;
        var flag = regx.test(age);
        if(!flag){
            ts.innerHTML="<font color='red'>!</font><font color='yellow'>请输入合法年龄</font>";
        }else{
            ts.innerHTML="<font color='yellow'>年龄合法</font>";
            flag=true;
        }
        return flag;
    }
    //判断自我简介是否填写
    function js_check() {
       var flag=false;
        var js = document.getElementById("js").value;
        if(js.length!=0){
            flag=true;
        }
        return flag;
    }
</script>
</html>
结果展示：
在这里插入图片描述自我简述未填写所以注册失败
在这里插入图片描述
自然醒。
发布了56 篇原创文章 · 获赞 6 · 访问量 7786
私信关注
表单验证javascritpt

猜你喜欢
