JS页面验证必填源码及问题分析

JS代码：

<script language="javascript">

    function on_submit() {//验证数据的合法性
        if (form1.userName.value == "") {
            document.getElementById("userNameDiv1").style.display = "block";
            form1.userName.focus();
            return false;
        }else
         if (form1.pwd.value == "") {
            document.getElementById("passwordDiv").style.display = "block";
            form1.pwd.focus();
            return false;
        }else
         if (form1.repwd.value != form1.pwd.value) {
            document.getElementById("repwdDiv").style.display = "block";
            form1.repwd.focus();
            return false;
        }else
        if (form1.email.value != ""&&
        form1.email.value.search(/^\w+((-\w+)|(\.\w+))*\@{1}\w+\.{1}\w{2,4}(\.{0,1}\w{2}){0,1}/ig) == -1) {
            document.getElementById("emailDiv").style.display = "block";
            form1.email.focus();
            return false;
        }else
        if (form1.phoneNumber.value.search(/^(?:11\d|15[89])-?\d{5}(\d{3}|\*{3})$/) == -1) {
            document.getElementById("phoneNumberDiv").style.display = "block";
            form1.phoneNumber.focus();
            return false;
        }else
        if (form1.address.value == "") {
            document.getElementById("addressDiv").style.display = "block";
            form1.address.focus();
            return false;
        }else{
        return true;}
    }

</script>

html代码：

<form action="RegistServlet" method="post" name="form1" onSubmit=" return on_submit()">
                <h1>
                    注册界面
                </h1>
                <br>
                <table>
                    <tr>
                        <td align="right">
                            *
                        </td>
                        <td>
                            用户名：
                        </td>
                        <td>
                            <input type="text" name="userName" >
                        </td>
                        <td>
                            <div id="userNameDiv1" style="display: none" class="STYLE1">
                                用户名不能为空
                            </div>
                            <div id="userNameDiv2" style="display: none" class="STYLE1">
                                用户名重复
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            *
                        </td>
                        <td>
                            密码：
                        </td>
                        <td>
                            <input type="password" name="pwd" >
                        </td>
                        <td>
                            <div id="passwordDiv" style="display: none" class="STYLE1">
                                密码不能为空
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            *
                        </td>
                        <td>
                            重复密码：
                        </td>
                        <td>
                            <input type="password" name="repwd">
                        </td>
                        <td>
                            <div id="repwdDiv" style="display: none" class="STYLE1">
                                两次输入的密码不同
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            邮箱：
                        </td>
                        <td>
                            <input type="text" name="email" >
                        </td>
                        <td>
                            <div id="emailDiv" style="display: none" class="STYLE1">
                                邮箱输入格式不正确
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            *
                        </td>
                        <td>
                            电话：
                        </td>
                        <td>
                            <input type="text" name="phoneNumber" >
                        </td>
                        <td>
                            <div id="phoneNumberDiv" style="display: none" class="STYLE1">
                                电话号码必须为11位手机号
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            *
                        </td>
                        <td>
                            地址：
                        </td>
                        <td>
                            <input type="text" name="address" >
                        </td>
                        <td>
                            <div id="addressDiv" style="display: none" class="STYLE1">
                                地址不能为空
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" align="center">
                            (带*的为必填项)
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td align="center">
                            <input type="submit" value="注册" >
                        </td>
                        <td align="center" colspan="2">
                            <input type="reset" value="重置">
                        </td>
                    </tr>
                </table>
            </form>

问题一：编译工具报错？  οnsubmit="return check()"时，会报Cannot return from outside a function or method.这时取消编译工具的自动验证功能即可

问题二：验证不起作用？   onsubmint只对input的submit类型起作用，如果写的是input ，type="button",然后通过一个js方法来提交action，验证会不起作用。

举例：<a style="float:left;" class="save" οnclick="save()"><span>保存</span></a>

function save(){
        document.forms[0].submit();
}

这样写，验证代码是不会起作用的

直接在form里的table里写input的submit类型的提交，即可，如<input type="submit" class="save"  value="保存"/>