[Angularjs]表单验证

写在前面

在开发中提交表单，并对表单的值进行验证是非常常见的操作，angularjs对表单验证提供了非常好的支持。

demo

表单

<form name="myform" novalidate action="../api/order/lists/add" method="post">
    <p>
        <input type="text" name="name" ng-model="order.name" value="" required />
        <span style="color:red" ng-show="myform.name.$dirty && myform.name.$invalid">
            <span ng-show="myform.name.$error.required">订单名称是必须的。</span>
        </span>
    </p>
    <p>
        <input type="text" name="price" ng-model="order.price" value="" required />
        <span style="color:red" ng-show="myform.price.$dirty && myform.price.$invalid">
            <span ng-show="myform.price.$error.required">单价是必须的。</span>
        </span>
    </p>

    <input type="submit" name="name" ng-disabled="myform.name.$dirty && myform.name.$invalid ||
  myform.price.$dirty && myform.price.$invalid" />
</form>

服务端

        [HttpPost]
        [Route("api/order/lists/add")]
        public async Task<HttpResponseMessage> Post([FromBody] Order order)
        {
            return await Task.Factory.StartNew(() =>
            {
                HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.Accepted);
                order.Id = Guid.NewGuid();
                lstOrders.Add(order);
                response = new HttpResponseMessage(HttpStatusCode.Accepted)
                {
                    Content = new StringContent(JsonConvert.SerializeObject(new { _code = 200, _data = lstOrders }))
                };
                return response;
            });
        }

测试

提交后数据

总结

$dirty：表单有填写记录

$valid：字段内容合法的

$invalid：字段内容是非法的

$pristine：表单没有填写记录