姓名、电话验证

标签：表单验证、连接口

        <table>
            <caption>为方便我们的接待，请受邀机构填写如下信息：</caption>
            <tr>
                <th><label for="userName">负责人</label></th>
                <td><input type="text" id="userName" placeholder="请输入负责人姓名" maxlength="8"></td>
            </tr>
            <tr>
                <th><label for="userPhone">联系电话</label></th>
                <td><input type="tel" id="userPhone" placeholder="请输入负责人联系电话" maxlength="11"></td>
            </tr>
            <tr>
                <th><label for="userNum">出席场次</label></th>
                <td>
                    <select id="userNum">
                        <option value="">请选择要出席的场次</option>
                        <option value="第一场">第一场</option>
                        <option value="第二场">第二场</option>
                        <option value="第三场">第三场</option>
                        <option value="第四场">第四场</option>
                        <option value="第五场">第五场</option>
                    </select>
                </td>
            </tr>
        </table>
        <button type="submit" class="btn-submit" id="btnSubmit">提交申请</button>


<script>
    (function(w, d) {

        var phoneValid = new RegExp("^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$");

        function request(name, phone, num) {
            var img = new Image();
            img.src = "接口(name + "|" + phone + "|" + num);
        }

        var userName = d.getElementById("userName"),
            userPhone = d.getElementById("userPhone"),
            userNum = d.getElementById("userNum"),
            btnSubmit = d.getElementById("btnSubmit");

        btnSubmit.addEventListener("click", function(event) {
            var userNameValue = userName.value;
            if(userNameValue === "") {
                alert("请输入负责人姓名");
                return;
            }
            if(userNameValue.length > 8) {
                alert("请输入正确的负责人姓名");
                return;
            }

            var userPhoneValue = userPhone.value;
            if(userPhoneValue === "") {
                alert("请输入负责人联系电话");
                return;
            }
            if(!phoneValid.test(userPhoneValue)) {
                alert("请输入正确的手机号码");
                return;
            }

            var userNumValue = userNum.value;
            if(userNumValue === "") {
                alert("请选择场次");
                return;
            }

            request(userNameValue, userPhoneValue, userNumValue);

            userName.value = "";
            userPhone.value = "";
            userNum.selectedIndex = 0;

            alert("您的信息已提交！");

        }, false);

    }(window, document));
</script>

姓名、电话验证

标签：表单验证、连接口

原文地址：http://ppxxll.blog.51cto.com/10549080/1683931