[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：表单没有填写记录

博客地址：	http://www.cnblogs.com/wolf-sun/
博客版权：	本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/5494730.html