angular js 表单验证
<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
padding: 50px;
font-family: "微软雅黑";
}
input{
margin-bottom: 20px;
padding-left: 5PX;
width: 300px;
height: 30px;
background:#fff;
border: 1px solid#ccc;
border-radius: 3px;
webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
transition: all .8s;
}
input:focus {
border: 1px solid #6eb932;
outline: none;
webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
transition: all .8s;
}
button{
width: 100px;
height: 50px;
background: #6eb932;
color:#fff;
font-size: 16px;
outline: none;
border: none;
border-radius: 3px;
}
.txt{
font-size: 16px;
display: inline-block;
width: 120px;
}
.error {
color: red;
font-size: 12px;
padding-left: 5px;
}
.succese {
color: #999;
font-size: 12px;
padding-left: 5px;
}
</style>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[])
.controller('myCtrl', ['$scope', function ($scope) { }])
</script>
</head>
<body ng-controller="myCtrl">
<form class="mation" method="POST" name="myForm">
<label>
<span class="txt"> 姓名：</span><input type="text" id="user" name="user" value="" ng-model="data.name" placeholder="请输入姓名" ng-minlength="2" ng-maxlength="8">
<span class="error" ng-show="myForm.user.$error.minlength">姓名不能低于两位</span>
<span class="error" ng-show="myForm.user.$error.maxlength">姓名不能多于八位</span>
</label><br>
<label>
<span class="txt">用户名：</span><input type="text" name="username" ng-model="data.user" placeholder="不能超过10个字" ng-minlength="2"
ng-maxlength="10" required/>
<span class="error" class="error" ng-show="myForm.username.$error.minlength">
用户名不能低于两个字
</span>
<span class="error" class="error" ng-show="myForm.username.$error.maxlength">
用户名不能超过10个字
</span>
</label><br>
<label>
<span class="txt">手机号：</span><input type="text" name="tel" placeholder="请输入手机号" ng-pattern="/^1[34578]\d{9}$/" ng-model="data.tel">
<!-- /^1\d{10}$/; -->
<span class="succese" ng-show="myForm.tel.$dirty && myForm.tel.$valid">手机号验证成功</span>
<span class="error" ng-show="myForm.tel.$dirty && myForm.tel.$invalid">请输入正确手机号</span>
</label><br>
<label>
<span class="txt"> 邮箱：</span><input type="email" name="email" placeholder="请输入邮箱" ng-model="data.email">
<span class="error" ng-show="myForm.email.$dirty && myForm.email.$invalid">邮箱格式错误</span>
<span class="succese" ng-show="myForm.email.$dirty && myForm.email.$valid">邮箱验证成功</span>
</label><br>
<label>
<span class="txt">旧密码：</span><input type="password" id="password" value="" placeholder="请输入用户原始密码">
</label><br>
<label>
<span class="txt">新密码：</span><input type="password" id="password1" name="password1" ng-model="password1" value="" placeholder="请输入新密码">
</label><br>
<label>
<span class="txt">确认密码：</span><input type="password" id="password2" name="password2" ng-model="password2" value="" placeholder="请确认新密码">
<span class="error" ng-show="myForm.password2.$dirty && myForm.password1.$dirty && password1!=password2">两次密码输入不一致</span>
<span class="succese" ng-show="myForm.password2.$dirty && password1==password2">密码校验成功</span>
</label><br>
<button type="submit" id="submit" ng-disabled="myForm.$invalid || password1!=password2">提交表格</button>
</form>
</body>
</html>
首先先写一下angular js表单验证中所需要的几个常用指令
下面的几个命令 formName就等同于你form表单的name名称 比如“myForm” inputFieldName就等同于你的input表单名称 比如“user” 像$pristine这种就是就是下面我们需要用的了
formName.inputFieldName.$pristine;
未修改过的表单
布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过：
formName.inputFieldName.$dirty
修改过的表单
布尔型属性，当且仅当用户实际已经修改的表单。不管表单是否通过验证：如果为ture，表示修改过；false表示没有修改过：
formName.inputFieldName.$valid
通过验证的表单
布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true：
formName.inputFieldName.$invalid
和$valid相反 也是布尔型属性
用的比较频繁的就这几个 其他的下面代码中会写出来
先说一下 angular js的表单验证效果出来 必须要定义作用于 ng-app ng-controller 其次还有 input中的ng-model模版绑定...
先讲一下用户名吧 ng-minlength是字符串的最小长度 ng-maxlength 是字符串的最大长度
required是html的一个 属性 规定必需在提交之前填写输入字段。
如果使用该属性，则字段是必填（或必选）的。 有时候表单验证的时候会在form里直接去掉（现在都是动态绑定表单资料 不需要也可以）
定义好最小最大长度后 我们开始使用angular js命令
像ng-show ng-hide 和 ng-if 其实有个坑 这次就不写了 下次在专写
myForm.username.$error.minlength 中 .error.minlength是angular js的一个判断 如果字符串的长度小于minlength则返回true 此时ng-show就会生效 否则为false 此字段将display：nono掉
诺 像ng-maxlength也是一样
用户名 昵称 家庭地址什么的都可以这样写
像验证手机号的话 最简单就是 type="number" 直接限制除数字之外别的不能输入 不过总感觉有点怪异 键盘坏了？字怎么打不出来 是吧
我们可以直接用正则ng-pattern="/^1[34578]\d{9}$/" 这样有很少很少手机号匹配不成功 则可以选择ng-pattern="/^1\d{10}$/” 下面的判断条件和上面的一样 就是多了一个判断 还有时候会用到 || 这个看自己的需求
呢 邮箱的话就更简单了 一个type="email" HTML5的新属性还是很棒的 下面加上判断条件就行了 如果自己不喜欢可以用 正则匹配一下 那个看着特别高大上 但是。。。正则是火星文 你开心就好哈哈
最重要的就是密码了 一般如果修改密码的话 旧密码修改是有接口的 还需要md5什么的加密 这个提交后后台自己会判断 成不成功就是他们的事情了 下面的新密码和确认新密码就是两个ng-model模版通过anjular指令的比较 还是那句话你要是不喜欢就jq写个判断也一样
还有最后的提交 如果表单里有一个验证不通过 自动disabled掉 你点点点点吧。。哈哈
你可以用button 可以用input type="submit" 就好
下面贴一下验证效果
这是部ok的
这是ok的
还有input 的框颜色变化 加阴影 focus时候扩大 和placeholder的样式修改这个你们都会想要美观自己做一下 等下我把源码贴上
好了 在告诉你们两个福利 如果要是写生日什么关于时间的去网上找 My97DatePicker 这个插件
好了 就这些了 希望对你们有帮助
angular js 表单验证的更多相关文章
- angular.js表单验证
表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type=& ...
- angular编写表单验证
angular编写表单验证 一.整体概述 表单内容如下图,包括常用的用户名.密码.确认密码.手机.邮箱等 整体js代码很少,就一个指令用于写确认密码和密码是否相等.其他 验证都是使用angular自带 ...
- JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...
- js 表单验证控制代码大全
js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
- Js表单验证控件-02 Ajax验证
在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- c++11的for新用法 (重新练习一下for_each)
看到手册的代码里面有个for的很奇怪的用法,用了一把 http://www.cplusplus.com/reference/unordered_set/unordered_set/insert/ ...
- Vue.js 2.0 和 React、Augular
Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...
- IEngineEditor与IWorkspaceEdit，以及相关的事件监听
转自原文 IEngineEditor与IWorkspaceEdit,以及相关的事件监听 IEngineEditor适用于直接在图层上的编辑,例如使用"要素编辑"工具菜单上的&quo ...
- 一些.net开源项目
强大的插件系统,通过Addin构建成一个功能齐全的.net开发IDE.核心是AddInTree.跟随这个项目开发许多有用的组件,比如功能文本编辑器(ICSharpCode.TextEditor),Sh ...
- CTSC && APIO 总结
先说CTSC吧,第一试其实不难但是下意识觉得CTSC不就只能骗分吗,然后就全上暴力了.然而第二题再一次看漏了条件,即答案总和小于等于1e6.第三题现在回想起来要不然就是没有思考,要不然就是没学过数学, ...
- nodejs对静态文件目录的处理
Serving static files in Express To serve static files such as images, CSS files, and JavaScript file ...
- 浅析PC机串口通讯流控制
转自浅析PC机串口通讯流控制 我们在串行通讯处理中,常常看到RTS/CTS和XON/XOFF这两个选项,这就是两个流控制的选项,目前流控制主要应用于调制解调器的数据通讯中,但对普通RS232编程,了解 ...
- 【UVA1331】关于最优三角剖分
最近在练习DP专题,学会了很多表示方法和转换方法,今天做最优三角剖分的时候发现脑子卡了,不会表示状态,于是写个博客记录一下. 最优三角剖分的一类题目都是差不多的.给你一个多边形,让你把它分割成若干个三 ...
- Android 使用WakeLock
为了延长电池的使用寿命,Android设备会在一段时间后使屏幕变暗,然后关闭屏幕显示,最后停止CPU.WakeLock是一个电源管理系统服务功能,应用程序可以使用它来控制设备的电源状态. ...
- 深入了解View实现原理以及自定义View详解
下面几篇文章对View的原理讲的非常详细. Android LayoutInflater原理分析,带你一步步深入了解View(一) Android视图绘制流程完全解析,带你一步步深入了解View(二) ...