注册表单页面的内容校验

注册表单页面的内容校验

注意：getElementByld（参数）方法需要传入一个参数，若参数为id时，需要加“”；若参数为一个变量时，则只需传入变量名即可
表单页面代码

<table align="center" width="40%" height="1000px"
       background="./regist_bg.jpg">
    <tr>
        <td align="center">
            <form action="#" method="get" onsubmit="return checkForm()">
                <table bgcolor="white" width="50%" height="300px">
                    <tr>
                        <td align="right">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</td>
                        <td><input type="text" name="username" size="40px"
                                   placeholder="请输入用户名" id="username"/></td>
                    </tr>
                    <tr>
                        <td align="right">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
                        <td><input type="password" name="password" size="40px"
                                   placeholder="请输入密码" id="password"/></td>
                    </tr>
                    <tr>
                        <td align="right">确&nbsp;认&nbsp;密&nbsp;码：</td>
                        <td><input type="password" name="repassword" size="40px"
                                   placeholder="请输入确认密码" id="repassword"/></td>
                    </tr>
                    <tr>
                        <td align="right">email：</td>
                        <td><input type="email" name="email" size="40px"
                                   placeholder="请输入邮箱号" id="email"/></td>
                    </tr>
                    <tr>
                        <td align="center" colspan="2"><input type="submit"
                                                              value="注册" /></td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
</table>

JavaScript中的函数与java中的方法类似，指具有特定功能的代码块，函数要使用关键字function修饰，函数名可自定义常见写法：

<script type="text/javascript"> 
//函数的写法 
function writeNormul() { alert("常规写法");//这里是你函数的内容 }
//匿名函数的写法 
var writeNoName = function() { alert("匿名函数写法，将右边的值赋值给左边的变量"); //这里是你函数的内容 }
//调用 
writeNoName(); 
</script>

js代码校验邮箱校验需要用到正则匹配，匹配正则表达式的方式有；两种，使用string对象中的match（）方法，使用正则对象JS RegExp的test（）方法


获取表单中的各个节点，进行校验

<script>
        //自定义函数，
        function checkForm() {
            //校验
            //获得用户名
            var unameElem = document.getElementById("username")
            if (unameElem.value == ""){
                alert("用户名不为空!")
                return false
            }
            //获取密码
            var pwdElem = document.getElementById("password")
            if (pwdElem.value == ""){
                alert("密码不为空!")
                return false
            }
            // 获取确认密码
            var repwdElem = document.getElementById("repassword")
            if (pwdElem.value != repwdElem.value){
                alert("确认密码与密码不相符!")
                return false
            }
            //邮箱
            // /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ 邮箱正则
            var emailElem = document.getElementById("email")
            if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(emailElem.value)){
                alert("邮箱格式有误!")
                return false
            }
        }
    </script>

显示效果：