MVC前端与后端校验

参考文档:mvc中动态给一个Model类的属性设置验证 

<1>首先是在项目中添加一个ADO.NET实体数据模型,选择MemberInfo表 他会自动在模型里面生成一个MemberInfo的类,也会生成一个对应的实体类DataBaseEntities。用的时候只有用模型里的MemberInfo类和DataBaseEntities就好了。 不需再额外添加MemberInfo类了  【注意:这个DataBaseEntities 是你的数据库名字+Entities】

<2>现在要写用户注册的功能。MemberInfo类(数据表)里有很多字段的,而我们注册只需要用到 Mobile 和 Email 和Pwd字段 所以这里。我们单独创建一个Member的类 ,类里面有注册要用到的字段。如Email,Moblie Pwd ,RePwd ,Vcode等字段。


<3> 然后我们给Index 添加强类型视图,视图数据类就选择我们要进行注册的这个 Member类就好了。

<4>  当用户填写完数据点击提交的时候,我们再把Member类对应的字段 赋值给MemberInfo字段对应的字段 。然后对MemberInfo进行跟新到数据保存数据

大概流程是:bigTreeEntities db = new bigTreeEntities();

namespace bigtree.Controllers
{
    public class AccountController : Controller
    {
        //
        // GET: /register/

        bigTreeEntities db = new bigTreeEntities();
       
        [HttpPost]
        public ActionResult Register(Member member) //Member是用于注册的类。生成强类型视图,选择的视图数据类就是Member。用户填写的数据的值其实就是赋给Member类的相应字段的
        {
	    //Member是一个注册要用到的类。Member类里有注册要用到的所有字段
            
            MemberInfo info = new MemberInfo();   //MemberInfo是数据实体类。添加实体的时候,选择的表,自动生成的对应的类
            info.mobile = member.Mobile; //将注册类Member的字段赋值赋值给实体类MemberInfo对应的字段
            info.email = member.Email;
            info.pwd = EncryptNoPrefix(member.Pwd);  //对密码进行MD5加密
            
            //bigTreeEntities con = new bigTreeEntities();
            //db.AddToMemberInfo(info);  // 用于向 MemberInfo EntitySet 添加新对象的方法,已弃用 。改成下面的b.MemberInfo.AddObject(info);

            db.MemberInfo.AddObject(info); //将对象添加到当前实体集中的对象上下文。
            db.SaveChanges(); // 将所有更新保存到数据源并重置对象上下文中的更改跟踪。

            return RedirectToAction("Index", "Login"); //跳转到Login控制器下的Index方法

        }

    }
}


======================================================言归正传,下面开始做

Account控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using bigtree.ViewModel;
using System.Security.Cryptography;
using bigtree.Actions;
using System.Text.RegularExpressions;
using Peer._128uu.DAL.Models;

namespace bigtree.Controllers
{
    public class AccountController : Controller
    {
        //
        // GET: /register/

        bigTreeEntities db = new bigTreeEntities();
        public ActionResult Index()
        {

            
            return View();
        }

        /// <summary>
        /// MD5加密
        /// </summary>
        /// <param name="encField">要加密的字段</param>
        /// <returns></returns>
        public static string EncryptNoPrefix(string encField)
        {
            //input = mixtureSeed + input;  
            System.Security.Cryptography.MD5 md5 = new MD5CryptoServiceProvider();
            byte[] datSource = System.Text.Encoding.Default.GetBytes(encField);
            byte[] newSource = md5.ComputeHash(datSource);
            string byte2String = null;
            for (int i = 0; i < newSource.Length; i++)
            {
                string thisByte = newSource[i].ToString("x");
                if (thisByte.Length == 1) thisByte = "0" + thisByte;
                byte2String += thisByte;
            }
            return byte2String;
        }

        /// <summary>
        /// 通过get请求跳到这个页面的时候直接进入Index页面。
        /// </summary>
        /// <returns></returns>
        public ActionResult Register()
        {
            return View("Index");
        }

        /// <summary>
        /// 后台验证写在这个Post请求的注册方法中,在验证全部通过后将数据保存到数据
        /// </summary>
        /// <param name="member">Member是用于注册的类。生成强类型视图,选择的视图数据类就是Member。用户填写的数据的值其实就是赋给Member类的相应字段的</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Register(Member member)
        {
            if (string.IsNullOrWhiteSpace(member.Mobile))
            {
                ViewData["errorMobile"] = "手机号码不能为空";
                return View("Index");
            }
            if (!Regex.IsMatch(member.Mobile, @"^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$"))
            {
                ViewData["errorMobile"] = "手机号码已存在或格式不正确";
                return View("Index");                
            }

            //Any:确定序列中的任何元素是否存在或满足条件,如果满足条件,则返回true,否则返回false;
            //db.MemberInfo.Any(x => x.mobile == member.Mobile)的返回值是一个bool值

            //检查用户输入的手机号码( member.Mobile是否在数据库中也有同样的手机号码(x.mobile))
            var queryMobile = db.MemberInfo.Any(x => x.mobile == member.Mobile); 
            if (queryMobile)
            {
                ViewData["errorMobile"] = "手机号码已存在";
                return View("Index");
            }
                                
            
            if (string.IsNullOrWhiteSpace(member.Email))
            {
                ViewData["errorEmail"] = "手机号码不能为空";
            }
            if (!Regex.IsMatch(member.Email, @"^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$"))
            {
                ViewData["errorEmail"] = "邮箱格式错误,请重新输入";
                return View("Index");
            }
            var queryEmail = db.MemberInfo.Any(x => x.email == member.Email);
            if (queryEmail)
            {
                ViewData["errorEmail"] = "电子邮箱已存在";
                return View("Index");
            }

            if (string.IsNullOrWhiteSpace(member.Pwd))
            {
                ViewData["errorPwd"] = "密码不能为空";
                return View("Index");
            }
            if (member.Pwd.Length < 6)
            {
                ViewData["errorPwd"] = "密码不能少于6位";
                return View("Index");
            }
            if (member.RePwd != member.Pwd)
            {
                ViewData["errorRePwd"] = "密码不一致,请重新输入";
                return View("Index");
            }
            if (member.Vcode != Session["ValidateCode"].ToString())
            {
                ViewData["errorCode"] = "验证码错误,请重新输入";
                return View("Index");
            }


            MemberInfo info = new MemberInfo();//MemberInfo是数据实体类。添加实体的时候,选择的表,自动生成的对应的实体类

            //Member是一个注册要用到的类。Member类里有注册要用到的所有字段
            info.mobile = member.Mobile; //将注册类Member的字段赋值赋值给实体类MemberInfo对应的字段
            info.email = member.Email;
            info.pwd = EncryptNoPrefix(member.Pwd);  //对密码进行MD5加密
            
            //bigTreeEntities con = new bigTreeEntities();
            //db.AddToMemberInfo(info);  // 用于向 MemberInfo EntitySet 添加新对象的方法,已弃用 。改成下面的b.MemberInfo.AddObject(info);

            db.MemberInfo.AddObject(info); //将对象添加到当前实体集中的对象上下文。
            db.SaveChanges(); // 将所有更新保存到数据源并重置对象上下文中的更改跟踪。

            return RedirectToAction("Index", "Login"); //跳转到Login控制器下的Index方法

        }


        public ActionResult CheckMobile(string mobile)
        {
            var queryMobile = db.MemberInfo.Any(x => x.mobile == mobile);
            if (queryMobile)
            {
                return Json("{success:false,message:'手机号码已经存在'}", JsonRequestBehavior.AllowGet);
            }
            return Json("{success:true,message:'手机号码可以使用'}", JsonRequestBehavior.AllowGet);
        }

        public ActionResult CheckEmail(string email)
        {
            var queryEmail = db.MemberInfo.Any(x => x.email == email);
            if (queryEmail)
            {
                return Json("{success:false,message:'Email已经存在'}", JsonRequestBehavior.AllowGet);
            }
            return Json("{success:true,message:'Email可以使用'}", JsonRequestBehavior.AllowGet);
        }

        //验证码生成器。
        public ActionResult GetValidateCode()
        {
            ValidateCode vCode = new ValidateCode();
            string code = vCode.CreateValidateCode(5);
            Session["ValidateCode"] = code;
            byte[] bytes = vCode.CreateValidateGraphic(code);
            return File(bytes, @"image/jpeg");
        }

    }
}



Index视图

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<bigtree.ViewModel.Member>" %>

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="keywords" content="关键词1,关键词2,关键词3" />
    <meta name="description" content="对网站的描述" />
    <title>网站</title>
    <link href="../../Html/css/style.css" rel="stylesheet" type="text/css" />
    <link href="../../Html/css/register.css" rel="stylesheet" type="text/css" />
    <script src="../../Html/js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../../Html/js/js.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <style type="text/css">
 
    </style>

        <script type="text/javascript">

            //将字符串转换成Json
            function strToJson(str) {
                var json = eval('(' + str + ')');
                return json;
            }


            $(function () {

                //手机号码验证
                jQuery.validator.addMethod("isMobile", function (value, element) {
                    var tel = /13[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$/;
                    var isPass = this.optional(element) || (tel.test(value));

                    if (isPass) {
                        $.ajax({
                            url: "/Account/CheckMobile",
                            data: { mobile: $("#Mobile").val() },
                            dataType: "Json",

                            async: false,
                            success: function (data) {
                                //alert(data)
                                var dataNews = strToJson(data)
                                isPass = dataNews.success;
                                //alert(isPass);
                                //$("#lableMobile").text(dataNews.message);
                            }
                        });
                    }
                    //alert(isPass);
                    return isPass;
                }, "请正确填写您的手机号码");


                //E-mail验证
                jQuery.validator.addMethod("isEmailUsed", function (value, element) {
                    var f = false;

                    $.ajax({
                        url: "/Account/CheckEmail",
                        data: { email: $("#Email").val() },
                        async: false,
                        success: function (res) {                          
                            var resNews = strToJson(res);
                            f = resNews.success;
                        }
                    });
                    return f;
                }, "请使用其他邮箱");



                $('form').validate({
                    rules: {

                        Mobile: {
                            required: true,
                            isMobile: true
                        },
                        Email: {
                            required: true,
                            email: true,
                            isEmailUsed: true

                        },
                        Pwd: {
                            required: true,
                            minlength: 6
                        },
                        RePwd: {
                            required: true,
                            equalTo: '#Pwd'
                        },
                        valiCode: {
                            required: true
                        }
                    },
                    messages: {
                        Mobile: {
                            required: "请输入手机号码",
                            isMobile: "手机号码已存在或格式不正确"
                        },
                        Email: {
                            required: "请输入邮箱",
                            email: "邮箱格式错误,请重新输入",
                            isEmailUsed: "邮箱已经存在"
                        },
                        Pwd: {
                            required: "请填写密码",
                            minlength: "密码不能少于6位"
                        },
                        RePwd: {
                            required: "请重复输入密码",
                            equalTo: '密码不一致,请重新输入'
                        },
                        valiCode: {
                            required: "请输入验证码"
                        }
                    },
                    submitHandler: function (form) {
                        form.submit();
                    }

                });

            });
</script>
</head>
<body>
    <% using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @id="form1",@name="form1" }))
       {%>
    <%: Html.ValidationSummary(true)%>
    <!--顶部+logo+导航-->
    <div class="logo_box">
        <div id="logo">
            <a title="我的王网">我的王网官网</a></div>
    </div>
    <!---->
    <div class="registerCon">
        <h2>
            注册新会员<span class="oldUser">已有账户?<a href="../../Html/login.html">直接登录</a></span></h2>
        <ul class="registerForm">
            <li>
                <p class="registerTil">
                    手机号:</p>
                <div class="setterBd">
                    <%: Html.TextBoxFor(model => model.Mobile, new { @class = "setterInput fl",@id="Mobile" })%>
                   
                    <%--<div class="setterExplain" id="lableMobile">
                        可用作登录名</div>--%>
                </div>
            </li>
            <li>
                <p class="registerTil">
                    Email:</p>
                <div class="setterBd">
                    <%: Html.TextBoxFor(model => model.Email, new { @class = "setterInput fl",@id="Email" })%>

                    <%--<div class="setterExplain" id="lableEmail">
                        可用作登录名</div>--%>
                </div>
            </li>
            <li>
                <p class="registerTil">
                    密码:</p>
                <div class="setterBd">
                    <%: Html.PasswordFor(model => model.Pwd, new { @class = "setterInput fl newPassword" })%>
                    <%--<%:Html.ValidationMessageFor(model => model.Pwd)%>--%>
                    <%--<div class="setterExplain" id="lablePwd">
                        请设置您的登录密码</div>--%>
                   
                    <ul class="strength">
                        <li class="low">弱</li>
                        <li class="mid">中</li>
                        <li class="hig">强</li>
                    </ul>
                </div>
            </li>
            <li>
                <p class="registerTil">
                    请再次输入密码:</p>
                <div class="setterBd">
                    <%: Html.PasswordFor(model => model.RePwd, new { @class = "setterInput fl" })%>
                    <%:Html.ValidationMessageFor(model => model.RePwd)%>
                    <div class="setterExplain error" id="lableErrorPwd">
                        </div>
                </div>
            </li>
            <li>
                <p class="registerTil">
                    请输入验证码:</p>
                <div class="setterBd">
                    <input type="text" class="setterInput fl vCode" id="valiCode" name="valiCode" />
                    <div class="setterExplain">
                        <a>
                            <img src="../../Images/yangzhengma_03.png" alt="验证码"/>看不清?换一张</a></div>
                </div>
            </li>
        </ul>
        <input id="submit" type="submit" value="立即注册" class="registerBtn" />
    </div>
    <% } %>
</body>
</html>

ViewModel 注册类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace bigtree.ViewModel
{
    public class Member
    {
     
        /// <summary>
        /// 用户手机
        /// </summary>
        //[Required(AllowEmptyStrings = false, ErrorMessage = "手机号码不能为空")] 
        //[RegularExpression(@"^1[3|4|5|8][0-9]\d{4,8}$",ErrorMessage="手机号码不正确")]
        public string Mobile { get; set; }


        /// <summary>
        /// 密码
        /// </summary>
        //[DataType(DataType.Password)]
        //[StringLength(12, MinimumLength = 6, ErrorMessage = "密码长度必须在{2}和{1}位之间")] 
        //[Required(AllowEmptyStrings=false,ErrorMessage="密码不能为空")]  
         public string Pwd { get; set; }

        /// <summary>
        /// 密码
        /// </summary>
        //[DataType(DataType.Password)] //将密码已*号的形式来显示  
        //[Required(AllowEmptyStrings = false, ErrorMessage = "密码不能为空")]
        public string RePwd { get; set; }


        /// <summary>
        /// 电子邮箱
        /// </summary>
        //[Required(ErrorMessage = "邮箱不能为空")]
        //[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9]+\.[A-Za-z]{2,4}", ErrorMessage = "{0}的格式不正确")]
        public string Email { get; set; }

        /// <summary>
        /// 验证码
        /// </summary>
        public string Vcode { get; set; }

       
    }
}


<2>前段Validate校验

@model ZuCheMvcApp.Models.CR_BC_BRAND_SERIES

@{
    Layout = null;
}


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <link href="~/third-party/easyui/jquery-easyui-1.4.1/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/third-party/easyui/css/default.css" rel="stylesheet" />
    <script src="~/third-party/uploadify-v3.2.1/jquery.uploadify.min.js"></script>
    <link href="~/third-party/uploadify-v3.2.1/uploadify.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.validate.js"></script>
</head>
<body>
    @using (Html.BeginForm("Create", "Bc_Brand_Series", FormMethod.Post, new {@id="form1",@name="form1"}))
    {
        @Html.AntiForgeryToken()

        <div class="panel" style="display: block; width: 400px;">
            <div class="panel-header">
                <div class="panel-title">品牌车系</div>
            </div>

            <div class="easyui-panel panel-body">
                <table>
                    <tr><th>汽车品牌编号</th><td>@Html.TextBoxFor(model => model.CR_BC_BRAND_ID)</td></tr>
                    <tr><th>品牌车系名称</th><td>@Html.TextBoxFor(model => model.SERIES_NAME)</td></tr>
                    <tr><th>展示图片</th>
                    @*<td>@Html.EditorFor(model => model.SERIES_PIC)</td>*@
                        <td style="width:300px;padding-top:10px;">
                            <input type="text" id="PIC_NAME" name="SERIES_PIC" style="display:none;" />
                            <span id="uploadify"></span>
                            <div>
                                <img id="ImgResult" style="max-width: 300px; max-height: 150px; display:none;" />
                            </div>
                        </td>
                    </tr>
                    <tr><th>不计免赔服务价格</th><td>@Html.TextBoxFor(model => model.CDW_COST)</td></tr>
                    <tr><th>保险费</th><td>@Html.TextBoxFor(model => model.INSURANCE_COST)</td></tr>
                    <tr><th>创建人</th><td>@Html.TextBoxFor(model => model.CREATOR_ID)</td></tr>
                    <tr><th>创建时间</th><td><input type="text" name="CREATED_TIME" value="@DateTime.Now.ToString()" /></td></tr>
                    <tr style="display:none"><th>修改时间</th><td><input type="text" name="UPDATE_TIME" value="@DateTime.Now.ToString()" /></td></tr>
                    <tr><td><input type="submit" value="确定" class="btn btn-default" /></td><td>@Html.ActionLink("返回列表", "Index")</td></tr>
                </table>
            </div>
        </div>
    }
    </body>
</html>

<script type="text/javascript">
        $(function () {
            $('#uploadify').uploadify({
                uploader: '/Bc_Brand_Series/PicUpload',// 服务器端处理地址
                swf: '/third-party/uploadify-v3.2.1/uploadify.swf',
                width: 60,
                height: 23,
                buttonText: "浏  览",
                buttonClass: "uploadify-button-new",
                fileTypeExts: "*.jpg;*.jpeg;*.png",
                fileTypeDesc: "请选择 jpg jpeg png 文件",
                fileSizeLimit: "4MB",
                multi: false,
                onUploadStart: function (file) {
                    $("#uploadify").uploadify("settings", "formData", {@foreach (string k in Request.Cookies.AllKeys)
                    {
                        @:'cookie_@(k)': '@Request.Cookies[k].Value',
                                                }'': ''
                    });
                },
                onSelectError: function (file, errorCode, errorMsg) {
                    switch (errorCode) {
                        case -110:
                            //alert($("#uploadify").uploadify("fileSizeLimit"));
                            alert("文件 [" + file.name + "] 大小超出系统限制的" + jQuery('#uploadify').uploadify('settings', 'fileSizeLimit') + "大小!");
                            break;
                    }
                },
                onUploadSuccess: function (file, data, response) {
                    if (data != "") {
                        $("#ImgResult").show().attr("src", "/upload/car_brand_series/" + data);
                        $("#PIC_NAME").val(data);
                        //$("#IMG_URL").val(data);
                    }
                }
            });

        });
</script>

<script type="text/javascript">
    $(function () {
        $("#form1").validate({
            rules: {
                CR_BC_BRAND_ID: { required: true },
                SERIES_NAME: { required: true },
                SERIES_PIC: { required: true },
                CDW_COST: { required: true },
                INSURANCE_COST: { required: true },
                CREATOR_ID: { required: true },
                CREATED_TIME: { required: true },
                UPDATE_TIME: { required: true }
            },
            messages: {
                CR_BC_BRAND_ID: { required: "不能为空" },               
                SERIES_NAME: { required: "*" },
                SERIES_PIC: { required: "*" },
                CDW_COST: { required: "*" },
                INSURANCE_COST: { required: "*" },
                CREATOR_ID: { required: "*" },
                CREATED_TIME: { required: "*" },
                UPDATE_TIME: { required: "*" }
            },
            submitHandler: function (form) {
                //form.submit();
                alert("111");
            }

        });
    });

</script>


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值