[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 = , _data = lstOrders }))
};
return response;
});
}
测试
提交后数据
总结
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是非法的
$pristine:表单没有填写记录
[Angularjs]表单验证的更多相关文章
- angularjs表单验证checkbox
angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
- AngularJs表单验证
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
- AngularJS表单验证,手动验证或自动验证
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...
- AngularJS 表单验证小结
注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type=& ...
- angularjs 表单验证(不完整版)
针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: ...
- 彻底弄懂angularJS表单验证
常用的表单验证指令 (基本概念) 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" ...
- AngularJS表单验证开发案例
angular支持IE8+浏览器,虽然性能很好,但是目前只适用于手机端项目 知识点:域$scopeAngularJS基础指令指令实现不同的功能学习思路和方法 <link rel="st ...
随机推荐
- GameObject.Instantiate(游戏体的实例化),角色的选择
using UnityEngine; using System.Collections; public class CharacterCreation : MonoBehaviour { public ...
- Hadoop 学习笔记3 Develping MapReduce
小笔记: Mavon是一种项目管理工具,通过xml配置来设置项目信息. Mavon POM(project of model). Steps: 1. set up and configure the ...
- js-自制轮播插件!
刚接触轮播的时候,感觉这种东西好高端,后来学习了jquery后,发现原来挺简单的,而且实现轮播也有很多形式,我用jquery自制了一个轮播插件,其实我这个说是插件,好像其实就是一个高度抽象的函数而已. ...
- 【BZOJ-4521】手机号码 数位DP
4521: [Cqoi2016]手机号码 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 303 Solved: 194[Submit][Status ...
- Visual Studio 2015出现Cannot find one or more components. Please reinstall the application.的问题解决
cd C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE devenv.exe /resetuserdata devenv. ...
- VS提示“项目文件" "已被重命名或已不在解决方案中”的解决办法 .
多个项目的源码在一个源代码中,其中,有一个源代码废弃不可用了.删除后,再次生成解决方案时出现了问题“项目文件" "已被重命名或已不在解决方案中”. 解决方法是: 1.找到主项目,右 ...
- Nginx 日志分享
Nginx 日志对于大部分人来说是个未被发掘的宝藏,总结之前做某日志分析系统的经验,和大家分享一下 Nginx 日志的纯手工分析方式. Nginx 日志相关配置有 2 个地方:access_log 和 ...
- xml解析模块
XML XML是可扩展标记语言的缩写,是实现不同语言或程序之间进行数据交换的协议,主要可以对key添加属性. 页面做展示(字符类型的一个xml格式数据)\做配置文件(内部xml格式的数据).,每一个节 ...
- url学习1
URLConnection提交请求 URL 对象代表统一资源定位器,他是指向互联网"资源"的指针. 通过URL读取网络资源 可以使用如下方法: URL url = new URL( ...
- 感受身边app
第一款:高考小秘书.http://www.liqucn.com/rj/519571.shtml.下载链接.我认为产品最大的优势在于对高考生非常有利,实用价值大,对于每年的高考生来说,高考资讯和大学资讯 ...