原生Javascript客户端表单验证

源代码：百度网盘

链接：https://pan.baidu.com/s/1LA5BDWJDpijLiB5UAILupg
提取码：mgmh
复制这段内容后打开百度网盘手机App，操作更方便哦

 

1.先建一个名为register.JS文件，复制粘贴以下js代码：

// JavaScript Document
function showTips(id, info) {
    document.getElementById(id + "span").innerHTML = "<font color='gray'>" + info + "</font>";
}

function check(id, info) {
    //1.获取用户输入的用户名数据
    var uValue = document.getElementById(id).value;
    //2.进行校验
    if (uValue == "") {
        document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + "</font>";
    } else {
        document.getElementById(id + "span").innerHTML = "";
    }
}


function checkForm() {
    /**校验用户名*/
    //1.获取用户输入的数据
    var uValue = document.getElementById("user").value;
    //alert(uValue);
    if (uValue == "") {
        //2.给出错误提示信息
        alert("用户名不能为空!");
        return false;
    }

    var shouhuouser = document.getElementById("shouhuouser").value;
    //alert(uValue);
    if (shouhuouser == "") {
        //2.给出错误提示信息
        alert("收货人姓名不能为空!");
        return false;
    }
  
    /*校验密码*/
    var pValue = document.getElementById("password").value;
    if (pValue == "") {
        alert("密码不能为空!");
        return false;
    }

    /**校验确认密码*/
    var rpValue = document.getElementById("repassword").value;
    if (rpValue != pValue) {
        alert("两次密码输入不一致!");
        return false;
    }

    /*校验邮箱*/

    /*校验手机号*/
    var eValue = document.getElementById("phone").value;

    if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(eValue)) {
        alert("手机号式不正确!");
        return false;
    }




}

 

2.先在HTML页面引入register.js文件，

页面代码：

    <!-- 注册区域 start -->
        <div id="register">
               <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
            <table border="1px" color="#F00" width="500px" height="280px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                <tr height="45px" align="center" >
                    <td colspan="2">
                        <font style="color:#F00; font-size:22px">书店会员注册</font> 
                    </td>
                </tr>
                <tr height="40px">
                    <td>
                       &nbsp;&nbsp; &nbsp; &nbsp; <span class="td">用户名:</span>
                    </td>
                    <td>
                        <input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')" /><span id="userspan"></span>
                    </td>
                </tr>
                <tr height="40px">
                    <td>
                      &nbsp;&nbsp; &nbsp; &nbsp;  <span class="td">密码:</span>
                    </td>
                    <td>
                        <input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')" /><span id="passwordspan"></span>
                    </td>
                </tr>
                <tr height="40px">
                    <td>
                       &nbsp;&nbsp; &nbsp; &nbsp;<span class="td"> 确认密码:</span>
                    </td>
                    <td>
                        <input type="password" name="repassword" size="34px" id="repassword"></input>
                    </td>
                </tr>
                <tr height="40px">
                    <td>
                      &nbsp;&nbsp; &nbsp; &nbsp; <span class="td">phone:</span>
                    </td>
                    <td>
                        <input type="text" name="phone" size="34px" id="phone" />
                    </td>
                </tr>
                
              
                <tr height="45px">
                    <td>
                      &nbsp;&nbsp; &nbsp; &nbsp; <span class="td"> 性别:</span>
                    </td>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="sex" value="男" />男
                       
                       &nbsp;&nbsp; <input type="radio" name="sex" value="女" />女
                    </td>
                </tr>
               
               
                <tr height="50px">
                    <td colspan="2">
                       <input type="submit" value="注册" class="submit"/>
                    </td>
                </tr>
            </table>
        </form>
        </div>
        <!-- 注册 end -->

 

运行效果图：