如何使用角度js使用服务器端验证 [英] How to use serverside validation using angular js

问题描述

//在我的家庭控制器中

[HttpGet]

public JsonResult IsUserNameExist（string Name）

{

使用（CobraDBEntities db = new CobraDBEntities（））

{

var check =！db.Person.Any（x => x.Name == Name） ; //如果我们使用Person per per.Name，依此类推，但我们使用字符串Name，以便



返回Json（check，JsonRequestBehavior.AllowGet）; < br $>
}

}



//注释必填字段验证器类

// In my home controller
[HttpGet]
public JsonResult IsUserNameExist(string Name)
{
using (CobraDBEntities db = new CobraDBEntities())
{
var check = !db.Person.Any(x => x.Name == Name);// if we use Person per then per.Name, and so on but we use string Name so that

return Json(check, JsonRequestBehavior.AllowGet);
}
}

// Annotation Required Field Validator Class

public  class PersonMD
      {
          public int Id { get; set; }
          [Required]
        // using json look in home controller
          [Remote("IsUserNameExist", "Home",ErrorMessage ="  Username Already Exist Use Another one")]
          public string Name { get; set; }
          [Required]
          public string Address1 { get; set; }
          [Required]
          public string Address2 { get; set; }
          [Required]
          public string Town_City { get; set; }
      }

如果不使用Angularjs，这工作正常

如果我使用angularjs然后

Without using Angularjs this is working fine
If i use angularjs then

IsUserNameExist

不起作用



我尝试过： <在index.cshtml中


//

doesn't work

What I have tried:

// in index.cshtml

<div class="modal-body">
                        <form name="form1">
                            <table class="table">
                                <tr>
                                    <td>Name</td>
                                    <td>
                                        <input type="text" ng-model="Name" name="name" ng-minlength="3" ng-maxlength="20" required />
                                        @*<span color="alert-danger" class="help-block" ng-show="form1.name.$invalid">Required </span>*@
                                        <span color="red" class="label label-info" ng-show="form1.name.$error.minlength">Too short </span>
                                        <span color="alert-danger" class="label label-info" ng-show="form1.name.$error.maxlength">Too long </span>
                                    </td>
                                <tr>
                                    <td>Address1</td>
                                    <td>
                                        <input type="text" ng-model="Address1" name="Add1" ng-minlength="3" ng-maxlength="100" required />
                                      
                                        <span color="alert-danger" class="label label-info" ng-show="form1.Add1.$error.minlength">Too short </span>
                                        <span color="alert-danger" class="label label-info" ng-show="form1.Add1.$error.maxlength">Too long </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Address2</td>
                                    <td>
                                        <input type="text" ng-model="Address2" name="Add2" ng-minlength="3" ng-maxlength="100" required />
                                       
                                        <span color="alert-danger" class="label label-info" ng-show="form1.Add2.$error.minlength">Too short </span>
                                        <span color="alert-danger" class="label label-info" ng-show="form1.Add2.$error.maxlength">Too long </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>[Town/City]</td>
                                    <td>
                                        <input type="text" ng-model="Town_City" name="town" ng-minlength="3" ng-maxlength="20" required />
                                       
                                        <span color="alert-danger" class="label label-info" ng-show="form1.town.$error.minlength">Too short </span>
                                        <span color="alert-danger" class="label label-info" ng-show="form1.town.$error.maxlength">Too long </span>
                                        
                                    </td>
                                </tr>
                                <tr>

                                    <td>
                                        <input type="button" class="btn btn-default" value="Save" ng-disabled="form1.$invalid" data-dismiss="modal" ng-click="AddUpdatePerson()" />
                                        <input type="button" class="btn btn-danger" value="Cancel" data-dismiss="modal" ng-click="Cancel()" />
                                    </td>
                                </tr>
                            </table>
                        </form>

                    </div>

推荐答案

无效>必需< / span> * @
< span color =redclass =label label-infong-show =form1.name。

invalid">Required </span>*@ <span color="red" class="label label-info" ng-show="form1.name.

error.minlength>太短< / span>
< span color =alert-dangerclass =label label-infong-show =form1.name。

error.minlength">Too short </span> <span color="alert-danger" class="label label-info" ng-show="form1.name.

error.maxlength>太长< / span>
< / td>
< tr>
< td> 地址1 < / td>
< ; td>
< input type =textng-model =Address1name =Add1ng-minlength =3ng-maxlength =100required />

< span colo r =alert-dangerclass =label label-infong-show =form1.Add1。

error.maxlength">Too long </span> </td> <tr> <td>Address1</td> <td> <input type="text" ng-model="Address1" name="Add1" ng-minlength="3" ng-maxlength="100" required /> <span color="alert-danger" class="label label-info" ng-show="form1.Add1.

这篇关于如何使用角度js使用服务器端验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！