记录一下angular可以直接用的输入框校验器，外加一个国内手机号码的校验

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="../js/lib/angular.js"></script>

<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.top5 {

    margin-top: 5px;

}

/**可以自行添加以下四个css类，在校验的时候输入框会自动显示对应的样式*/

.ng-invalid {

    border-color: red;

    border-width: 0.5px;

}

,

.ng-valid {

}

,

.ng-pristine {

}

,

.ng-dirty {

}

,

.ng-invalid-required {

}

,

.ng-invalid-minlength {

}

,

.ng-valid-max-length {

}

,

</style>

</head>

<body ng-app="myApp" ng-controller="myController">

    <div class="form-group">

        <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid"

            type="submit" value="提交" />

    </div>

    <form name='myForm'>

        <div class="row">

            <span class="col-md-2 text-left">必填:</span><input type="text"

                name="required" required ng-model="name" /></span>

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">最少五个字符:</span><input type="text"

                name="minLength" ng-minlength="5" ng-model="minLength" /></span>

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">最多五个字符:</span><input type="text"

                name="maxLength" ng-maxlength="5" ng-model="maxLength" />

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">邮件格式:</span><input type="email"

                name="email" ng-model="email" />

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">数字:</span><input type="number"

                name="number" ng-model="number" />

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">URL:</span><input type="url" name="url"

                ng-model="url" />

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">手机号码:</span><input type="text"

                name="phone" ng-model="phone" ng-pattern="/^1[0-9]{10}$/" />

        </div>

        <div class="top5 row">

            <span class="col-2 text-left">正则表达式:</span><input type="text"

                name="regx" ng-model="pattern" ng-pattern="/[a-zA-Z]/" />

        </div>

        <div class="top5">

            必填项绑定的数据:<span>{{name}},</span><span>没有被修改:</span> <span>{{myForm.required.$pristine

                }},</span>,<span>被修改了:</span><span>{{myForm.required.$dirty}}</span>

        </div>

        <div class="top5">最少五个字符绑定的数据:{{minLength}},校验是否通过:{{myForm.minLength.$valid}}，是否验证不通过:{{myForm.minLength.$invalid}}</div>

        <div class="top5">最多五个字符绑定的数据:{{maxLength}},详情:{{myForm.maxLength.$error}}</div>

        <div class="top5">email绑定的数据：{{email}}</div>

        <div class="top5">数字绑定的数据：{{number}}</div>

        <div class="top5">URL绑定的数据:{{url}}</div>

        <div class="top5">手机号码绑定的数据:{{phone}}，是否校验通过：{{myForm.phone.$valid}}</div>

        <div class="top5">正则绑定的数据:{{pattern}}</div>

    </form>

    <script>

 angular.module('myApp',[]).controller('myController',function($scope){

     //检查表单是否有修改

     });

</script>

</body>

</html>

静态效果如下：

本文参考自《angular权威教程》以及 http://www.cnblogs.com/rohelm/p/4033513.html，文章里还有一些更深入的内容，值得一读

validate 常用的输入框校验的更多相关文章

  1. 使用validate()方法进行输入校验 --Struts2框架

    服务器端的输入校验包含两种方式:硬编码方式和配置文件方式.本文演示硬编码方式中使用validate()方法进行输入校验. 1.项目目录结构: 2.项目核心代码: BookAction.java: pu ...

  2. Validate常用校验

    1.首先将jQuery.js和jquery.validate.js加入对应的页面中,如果要中文的提示语还要把messages_zh.js加入,以及对应的css文件. <link href=&qu ...

  3. JQuery -- Validate, Jquery 表单校验

    1. Jquery 表单验证需要插件 jQuery validation 1.7  ---验证插件需要:jQuery 1.3.2 或 1.4.2版本 http://jquery.bassistance ...

  4. easyui validate -- radio、checkbox 校验扩展，事件域名

    事件域名: $(dom).on('click.myNameSpace',function(){ ... }),其中‘.myNameSpace’便是域名: 目前作用:$(dom).off('click. ...

  5. Java常用的正则校验

    1.非负整数: (^[1-9]+[0-9]*$)|(^[0]{1}$) 或 (^[1-9]+[0-9]*$)|0 2.非正整数: (^-[1-9]+[0-9]*$)|(^[0]{1}$) 或 (^-[ ...

  6. springmvc JSR303 Validate 注解式，校验数据

    参考:http://www.cnblogs.com/liukemng/category/578644.html 先进行配置: <!-- 默认的注解映射的支持 --> <mvc:ann ...

  7. input输入框校验

    1.只能输入数字,当输入不符字符删除,光标位置不变 //只能输入数字 function onlyNumTrue(obj){ var reg = /[^\d]/g; var pos = obj.sele ...

  8. eslint常用三种校验语句

    1.关闭对整段代码的校验 /* eslint-disable */ code /* eslint-enable */ 2.关闭当前行代码的校验 line code // eslint-disable- ...

  9. 微信小程序常用表单校验方法（手机号校验、身份证号（严格和非严格校验、验证码六位数字校验））

    util.js function isPhone(value) { if (!/^1(3|4|5|7|8)\d{9}$/.test(value)) { return false } else { re ...

随机推荐

  1. keepalived 原理、安装与使用

    1. keepalived工作原理 keepalived是集群管理中保证集群高可用的一个服务软件,其功能类似于heartbeat,用来防止单点故障. keepalived是以VRRP协议为实现基础的, ...

  2. （二）SpringBoot整合常用框架Druid连接池

    一,在Pom.xml文件加入依赖 找到<dependencies></dependencies>标签,在标签中添加Druid依赖 <dependency> < ...

  3. python 中site-packages 和 dist-packages的区别

    dist-packages is a Debian-specific convention that is also present in its derivatives, like Ubuntu. ...

  4. memcache操作

    1 格式(telnet) <command name> <key> <flags> <exptime> <bytes> a) <com ...

  5. 洛谷1736（二维dp+预处理）

    洛谷1387的进阶版,但很像. 1387要求是“全为1的正方形”,取dp[i][j] = min(dp[i-1][j-1], min(dp[i-1][j], dp[i][j-1]))吧?这个有“只有对 ...

  6. EXBSGS

    http://210.33.19.103/problem/2183 参考:https://blog.csdn.net/frods/article/details/67639410(里面代码好像不太对) ...

  7. 线段树+离散化 POJ 2528 Mayor's posters

    题目传送门 题意:在一面墙上贴海报,有先后顺序,问最后有多少张不同的海报(指的是没被覆盖或者只是部分覆盖的海报) 分析:这题数据范围很大,直接搞超时+超内存,需要离散化:离散化简单的来说就是只取我们需 ...

  8. 1-3方法的重载（overload）

    之前已经写了一个方法sumInt用来计算两个int类型数字的和,如果要是想计算两个float类型数字的和呢?ok,那就再来写一个sumFloat方法,除此之外,还有long类型,double类型,如果 ...

  9. 分享几个自己喜欢的前端UI框架

    http://www.layui.com/ http://element-cn.eleme.io/#/zh-CN/component/installation

  10. ES6初探——编译环境搭建

    不好意思我又要来写操作文档了,看起来更像wiki的博客(如果你想深入学习,请阅读文末列的参考资料).本文将示例如何把ES6编译成ES5. 首先,你要自行查阅什么是ES6,和ES5.javascript ...