MVC【表单验证--JQuery验证，模型注解验证】

验证的目的是为了保证数据的有效性和合理性。比如某个文件不能为空，邮箱的格式是否正确等等。
不同语言的对方法的命名不同**，在JS中对函数的描述就是C#中的方法**

一，
1） 表单验证有两种验证方式：前端验证和服务器验证
前端验证更注重快捷，高效，可以把不是很重要信息进行前端验证
后台验证更加的私密，安全性更高，重要的信息就应该放到后台去验证

2） 验证的类型
1，必填验证
2，范围验证
3，比较验证
4，格式验证
5，特殊验证

二，前端验证–JQuery验证
表单验证
1，客户端的验证主要需要使用JQuery向表单添加验证功能
那么什么是JQuery？

JQuery的语法要引用标签是通过标签的ID。
function声明JQuery的方法 代表这是JQuery的方法。元素对JS脚本的调用，调用的是函数事件，最前面一般是On开头。

必填验证
return true 代表跳转
return false 代表不跳转

$(“form”).bind(“submit”,checkForm) 提交表单之前执行表单验证函数
例如：

$(function () {
        $("form").bind("submit", checkForm);
    })

这段代码表示在form表单执行之前，执行checkForm函数。“submit”代表提交类型

比较验证
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id1").val()!=("#id1").val()
$("#id1").val()=="" 为空

项目举例：

<h2>表单验证</h2>
<form action="/Validate/Index" method="post">
    <p>
        用户名：<input type="text" name="username" onblur="checkUser()" id="username" value="" /><label id="msg"></label>
    </p>
    <p>
        密码：<input type="password" name="pwdmsg" onblur="checkPwd()" id="pwdmsg" value="" /><label id="lbpwd"></label>
    </p>
    <p>
        确认密码：<input type="password" name="repwdmsg" onblur="comparePwd()" id="repwdmsg" value="" /><label id="lbpwd2"></label>
    </p>
    <button type="submit">提交</button>
</form>
@section scripts{

    <script>
        $(function () {
            $("form").bind("submit", checkForm);
        })

        function checkForm() {
            return checkUser() && checkPwd() && comparePwd();
        }
        //验证两次的值是否一致
        function comparePwd() {
            if (checkPwd()) {
                if ($("#pwdmsg").val() != $("#repwdmsg").val()) {
                    $("#lbpwd2").html("两次输入的密码不一致")
                    return false;
                } else {
                    $("#lbpwd2").html("");
                    return true;
                }
            } else {
                return false;
            }
           
        }
        //密码不能为空
        function checkPwd() {
            var userpwd = $("#pwdmsg").val();//获取到文本框的值
            //判断是否为空
            if (userpwd == "") {
                $("#lbpwd").html("密码不能为空");
                $("#pwdmsg").focus();//聚焦
                return false;
            } else {
                $("#pwdmsg").html("");
                return true;
            }
        }

        function checkUser() {
            var username = $("#username").val();//获取到文本框的值
            //判断是否为空
            if (username == "") {
                $("#msg").html("用户名不能为空");
                $("#username").focus();//聚焦
                return false;
            } else {
                $("#msg").html("");
                return true;
            }
        }
    </script>
}

三，服务器端验证（模型注解验证）
模型数据注解验证主要是在服务器端对数据进行验证

数据验证API
Compare 比较验证
Range 范围验证
RegularEzpression 正则表达式
Required 必填验证（其值必须非空或者不能只是空格）
StringLength 字符串长度范围

errorMessages 数据验证API的属性，当输入值与API不符时，就弹出

模型注解验证中，是将验证内容写在需要验证属性的上面

@HTML.ValidationSummary()
这个方法用于生成模型注解显示验证消息，网页的注解显示就靠这个系统包装好的方法了。

流程：项目举例
前端代码：

	<form action="/yanzheng/Index" method="post">
	    <p>
	        用户名：<input type="text" name="Name" id="username" value="" />
	    </p>
	    <p>
	        地址：<input type="text" name="Address" id="pwdmsg" value="" />
	    </p>
	    <p>
	        点击量：<input type="text" name="hit" id="repwdmsg" value="" />
	    </p>
	    <button type="submit">提交</button>
	    @Html.ValidationSummary()
	</form>

控制器代码：

	public ActionResult Index()
	        {
	            return View();
	        }
	        [HttpPost]
	        public ActionResult Index(Employee employee)
	        {
	            ViewBag.xianshi = "名字"+employee.Name+"地址"+employee.Address+"点击量"+employee.hit;
	            return View();
	        }
	
模型验证代码
	
	[StringLength(3,ErrorMessage ="你输入的名字超出了长度！")]
    [Required(ErrorMessage ="你输入的名字为空")]
    public string Name { get; set; }
    [Required(ErrorMessage = "你输入的地址为空")]
    public string Address { get; set; }
    [Required(ErrorMessage = "你输入的点击量为空")]
    [Range(1,50,ErrorMessage ="你输入的点击量超出了范围")]
    public Nullable<int> hit { get; set; }

用到的系统文件：
控制器引用：using WebApplication1.Models;
模型引用： using System.ComponentModel.DataAnnotations;