记录一下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. poj 3734 Blocks【指数型生成函数】

    指数型生成函数,推一推可得: \[ (1+\frac{x^1}{1!}+\frac{x^2}{2!}+\frac{x^3}{3!}+...)^2+(1+\frac{x^2}{2!}+\frac{x^4 ...

  2. bzoj 2460: [BeiJing2011]元素【线性基+贪心】

    先按魔力值从大到小排序,然后从大到小插入线性基中,如果插入成功就加上这个魔力值 因为线性基里是没有异或和为0的集合的,所以正确性显然,然后最优性,考虑放进去一个原来没选的,这样为了可行性就要删掉一个, ...

  3. P5163 WD与地图（整体二分+权值线段树）

    传送门 细节要人命.jpg 这题思路太新奇了--首先不难发现可以倒着做变成加边,但是它还需要我们资瓷加边的同时维护强连通分量.显然加边之后暴力跑是不行的 然后有一个想法,对于一条边\((u,v)\), ...

  4. 不常见偏门的Bug，Spring Boot IDEA 静态资源 图片访问404，初学者之殇

    用过Idea朋友都知道,它有一个非常让人喜欢的功能就是:打算在某个a目录下创建一个hello.class文件,那么你仅需要右键点击New-Java Class- 然后输入名字:a.hello 即可. ...

  5. TensorFlow图像预处理完整样例

    参考书 <TensorFlow:实战Google深度学习框架>(第2版) 以下TensorFlow程序完成了从图像片段截取,到图像大小调整再到图像翻转及色彩调整的整个图像预处理过程. #! ...

  6. Hexo瞎折腾系列(2) - 添加背景图片轮播

    动态背景图片插件jquery-backstretch jquery-backstretch是一款简单的jQuery插件,可以用来设置动态的背景图片,以下是官方网站的介绍. A simple jQuer ...

  7. [NOIP2018校模拟赛]T1 阶乘

    题目: 描述 有n个正整数a[i],设它们乘积为p,你可以给p乘上一个正整数q,使p*q刚好为正整数m的阶乘,求m的最小值. 输入 共两行. 第一行一个正整数n. 第二行n个正整数a[i]. 输出 共 ...

  8. 人品问题 树形dp

    题目 网上出现了一种高科技产品——人品测试器.只要你把你的真实姓名输入进去,系统将自动输出你的人品指数.把儿不相信自己的人品为0.经过了许多研究后,把儿得出了一个更为科学的人品计算方法.这种方法的理论 ...

  9. Suricata产生的数据存储目录

    不多说,直接上干货! 我这里呢,分两种常用的Suricata. 一.源码编译安装的Suricata 这里不多说,大家可以去看我下面写的博客 使用 Suricata 进行入侵监控(一个简单小例子访问百度 ...

  10. .net core跨域设置

    services.AddCors(options => options.AddPolicy("AllowSameDomain", builder => builder. ...