记录一下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. Spring 2.5

    Spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service 和 @Controller.在目前的 Spring ...

  2. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

    那么 pageEncoding , contentType 分别用来做什么那?在解释之前让我们先了解下jsp从被请求到响应经历的三个阶段: 第一阶段:将jsp编译成Servlet(.java)文件.用 ...

  3. UVa 1218 Perfect Service 完美的服务

    ***状态设计值得一看dp[u][0]表示u是服务器(以下v均指任意u的子结点,son指u的所有子结点)ap[u][0]=sum{dp[v][1]}+1//错误,服务器是可以和其他服务器相邻的dp[u ...

  4. 简单了解Linux中 du 和 df 以及它们的区别

    一 .du : 显示每个文件和目录的磁盘使用空间~~~文件的大小. 命令参数: -a   #显示目录中文件的大小  单位 KB . -b  #显示目录中文件的大小,以字节byte为单位. -c  #显 ...

  5. Sqlserver调用WebApi

    原文地址   http://www.cnblogs.com/lflyq/p/6065160.html sp_configure 'show advanced options', 1;GORECONFI ...

  6. AJPFX总结集合的概念

    //java 中集合的概述==========================================================        集合的概念:              为 ...

  7. vue-cli下配置项目访问ip和服务器ip

    一.配置项目访问ip,让本次代码支持localhost以外的ip地址访问模式:修改里的host配置,代码如下. 修改完记得 "npm run dev"重启服务. 二.在本地架设服务 ...

  8. 解决Ueditor在bootstarp 模态框中全屏问题

    基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...

  9. Understanding Scroll Views 深入理解 scroll view 读书笔记

    Understanding Scroll Views 深入理解 scroll view  读书笔记   It may be hard to believe, but a UIScrollView is ...

  10. Python behave in BDD

    BDD概念 全称 Behavior-driven development 中文 行为驱动开发 概念 是敏捷软件开发技术的一种,鼓励各方人员在一个软件项目里交流合作,包括开发人员.测试人员和非技术人员或 ...