MVC jquery表单验证 和 jquery_Validate表单验证

Posted 2021-06-26 //我是小白

用一个小案例演示简单的js表单验证，这是最原始的手写验证

html代码：

<form id="f1" action="" method="post">
            <p>员工姓名：<input id="name" name="name" type="text" /><span id="nameMsg"></span></p>
            <p>员工性别：<input id="gender" name="gender" type="text" /><span id="genderMsg"></span></p>
            <p>薪资：<input id="salary" name="salary" type="text" /><span id="salaryMsg"></span></p>
            <p><input id="btnok" type="submit" /></p>
</form>

JS代码:

<script type="text/javascript">
        $(function () {
        	//表单提交
            $("#f1").bind("submit", checkform);

            function checkform() {
                if (nameCheck() && genderCheck() && salaryCheck()) {
                    return true;
                } else {
                    return false;
                }
            }
            //用户名验证
            function nameCheck() {
                var name = $("#name").val();
                var nameMsg = $("#nameMsg");
                if (name != "") {
                    if (name.length >= 3 && name.length <= 8) {
                        nameMsg.html("");
                        return true;
                    } else {
                        nameMsg.html("输入长度为3-8");
                        $("#name").focus();
                        return false;
                    }
                } else {
                    nameMsg.html("姓名必填");
                    $("#name").focus();
                    return false;
                }
            }
            //性别验证
            function genderCheck() {
                var gender = $("#gender").val();
                var genderMsg = $("#genderMsg");
                if (gender != "") {
                    if (gender == '男' || gender == '女') {
                        genderMsg.html("");
                        return true;
                    } else {
                        genderMsg.html("性别只能为男或女");
                        $("#gender").focus();
                        return false;
                    }
                } else {
                    genderMsg.html("性别必填");
                    $("#gender").focus();
                    return false;
                }
            }

            //薪资验证
            function salaryCheck() {
                var salary = $("#salary").val();
                var salaryMsg = $("#salaryMsg");
                if (salary != "") {
                    if (salary>0) {
                        salaryMsg.html("");
                        return true;
                    } else {
                        salaryMsg.html("薪资只能大于0");
                        $("#salary").focus();
                        return false;
                    }
                } else {
                    salaryMsg.html("薪资必填");
                    $("#salary").focus();
                    return false;
                }
            }
        })
</script>

Validate插件

使用Validate插件必须引入 jquery.validate.js 点击进入下载地址

更多详情可以看看这位大佬的博客
链接：https://blog.csdn.net/m0_37686205/article/details/88822234