<!DOCTYPE HTML>

<html ng-app="deliciousApp">

<head>

    <meta charset="UTF-8">

</head>

<style type="text/css">

.form{padding: 35px 15px ;}

.form .p-input{color: #;font-size: 14px;border-bottom:1px solid #;padding: 18px  12px 5px;}

.form .p-input input[type=text]{color:#;}

.apply-error{color: #f05a5a;font-size: 12px;display: block;margin-top: 10px;}

.apply-btn{display:block;width: 245px;height: 40px;line-height: 40px;text-align: center;color: #ffffff;font-size: 15px;background: #;border-radius: 5px;margin-top:10px;}

/*input.ng-dirty.ng-invalid {

    border-color: #e9322d;

    -webkit-box-shadow: 0 0 6px #f8b9b7;

    -moz-box-shadow: 0 0 6px #f8b9b7;

    box-shadow: 0 0 6px #f8b9b7;

}*/

</style>

<body ng-controller="formCtr">

 <form name="applyForm" novalidate>

     <p class="p-input">

       <label>姓名</label>

       <input type="text"  placeholder="请输入姓名" name="delicacyName" ng-model="name" ng-minlength="" ng-maxlength="" required />

     </p>

     <p class="p-input">

       <label>手机号</label>

       <input type="text"  placeholder="请输入手机号" name="mobilePhone" ng-model="mobile" ng-pattern="/^1[3|4|5|7|8][0-9]\d{8}$/" required  />

     </p>

    <div ng-messages="applyForm.delicacyName.$error" ng-show="applyForm.delicacyName.$touched || applyForm.$submitted ">

        <div ng-message="required" class="apply-error">姓名不能为空</div>

        <div ng-message="minlength" class="apply-error">姓名不少于2字符</div>

        <div ng-message="maxlength" class="apply-error">姓名不大于6字符</div>

    </div>

    <div ng-messages="applyForm.mobilePhone.$error" ng-show="applyForm.mobilePhone.$touched || applyForm.$submitted ">

        <div ng-message="required" class="apply-error">手机号不能为空</div>

        <div ng-message="pattern" class="apply-error">手机号格式不正确</div>

    </div>

    <select ng-model="selected" ng-options="x.id as x.name for x in citys" ng-change="change()"></select>

    <div ng-show="cityError" class="apply-error">您还没有选择城市</div> <br/>

    <label>

      <input type="radio" ng-model="sex" value="boy" ng-change="changeSex()">

      男

    </label>

    <label>

      <input type="radio" ng-model="sex" value="girl" ng-change="changeSex()">

      女

      <div ng-show="sexChecked" class="apply-error">您没有选择性别</div><br/>

    <input type="checkbox" ng-checked="checked" ng-model="checked"> <label>同意协议</label>

    <div ng-show="!checked" class="apply-error">您还未选中协议</div>

    <a href="javascript:void(0)" class="apply-btn" ng-click="submitApply(applyForm)">申请</a>

  </form>

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

  <script type="text/javascript" src="angular-messages.min.js"></script>

  <script type="text/javascript">

   var deliciousApp = angular.module('deliciousApp', ['ngMessages']);

   deliciousApp.controller("formCtr",["$scope","$http",function($scope,$http){

      $scope.checked=true;

      $scope.citys = [

                        {name:'请选择',id:'-1'},

                        {name:'北京',id:''},

                        {name:'上海',id:''},

                        {name:'广州',id:''}

                    ];

      $scope.selected="-1";

      $scope.changeSex=function(){

        if($scope.sex){

          $scope.sexChecked=false;

        }

      }

      $scope.change=function(){

        $scope.selected==-?$scope.cityError=true:$scope.cityError=false;

      }

      $scope.submitApply=function(applyForm){

        applyForm.$submitted=true;

        if($scope.selected==-){

           $scope.cityError=true;

        }else{

          $scope.cityError=false;

        }

        if(!$scope.sex){

          $scope.sexChecked=true;

        }

        console.log(applyForm);

        // if(applyForm.$valid){

        //       var url=web_sapi_domain+'shopping/MainServlet?req_fmt_type=jsonp&method=addDelicacyUser&req_str='+

        //           '{"scope":"11102","buyerEmail":"'+$scope.buyeremail+'","delicacyName":"'+$scope.name+'","mobilePhone":"'+$scope.mobile+'","applyCode":"'+$scope.inviteCode+'"}&callback=JSON_CALLBACK';

        //        $http.jsonp(url)

        //         .success(function(response){

        //           response=angular.fromJson(response);

        //           if(response.Result.Header.resultID==0){

        //                alert("申请成功，我们会尽快为您审核！");

        //                //$location.path("/");

        //           }else{

        //              alert(response.Result.Header.resultMessage);

        //           }

        //         });

        //   }

        }

   }]);

  </script>

</body>

</html>

angular form 验证 ngMessage的更多相关文章

  1. angular form 验证

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. angular实现form验证

    先上效果页面:https://lpdong.github.io/myForm-1/ 其中几个知识点 1.angularJs提供了几个新的type类型: type="password" ...

  3. Nodejs之MEAN栈开发（四）---- form验证及图片上传

    这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...

  4. 细说angular Form addControl方法

    在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被 ...

  5. form验证及图片上传

    form验证及图片上传 这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/ ...

  6. Asp.Net Form验证不通过,重复登录

    问题产生根源: 当然,其实应该需要保持线上所有机器环境一致!可是,写了一个小程序.使用的是4.5,aysnc/await实在太好用了,真心不想把代码修改回去. so,动了念头,在这台服务器上装个4.5 ...

  7. tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...

  8. Python Django的分页，Form验证，中间件

    本节内容 Django的分页 Form 中间件 1 Django 分页 1.1 Django自带的分页 1.首先来看下我的测试数据环境 ############ models.py ######### ...

  9. Django中Form验证

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一,Form验证 第一种操作:主要是这三个函数 ...

随机推荐

  1. php判断爬虫

    function checkrobot($useragent = ''){ static $kw_spiders = 'Bot|Crawl|Spider|slurp|sohu-search|lycos ...

  2. XCode中的单元测试：编写测试类和方法（内容意译自苹果官方文档）

    当你在工程中通过测试导航栏添加了一个测试target之后, xcode会在测试导航栏中显示该target所属的测试类和方法. 这一章演示了怎么创建测试类,以及如何编写测试方法. 测试targets, ...

  3. UDF

    一:UDF 1.自定义UDF 二:UDAF 2.UDAF 3.介绍AbstractGenericUDAFResolver 4.介绍GenericUDAFEvaluator 5.程序 package o ...

  4. javax.management.NotCompliantMBeanException

    public interface QueueMBean { } 假如接口名叫 XMBean ,那么实现名就必须一定是X,而且是大小写敏感的. public class Queue implements ...

  5. IIS8中部署WCF服务出错：HTTP 错误 404.3 - Not Found

    解决方法,以管理员身份进入命令行模式,运行: "%windir%\Microsoft.NET\Framework\v3.0\Windows Communication Foundation\ ...

  6. C#中扩展方法

    什么是扩展方法? 扩展方法顾名思义,就是允许向现有的“类型”添加方法,而无需创建派生类.重新编译或以其他方式修改原来类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用. 扩 ...

  7. ActiveMQ持久化消息

    ActiveMQ的另一个问题就是只要是软件就有可能挂掉,挂掉不可怕,怕的是挂掉之后把信息给丢了,所以本节分析一下几种持久化方式: 一.持久化为文件 ActiveMQ默认就支持这种方式,只要在发消息时设 ...

  8. QDir路径的测试与创建-QT

    #include <QCoreApplication> #include <QDir> #include<QtDebug > #include<QFileIn ...

  9. 通过CSS使文本框中输入的小写字母变大写字母

    在style.css文件中写 .dataField input{text-transform:uppercase;} .dataField textarea {text-transform:upper ...

  10. Webapp的display-name问题

    临时需要做一个webapp,就按myeclipse缺省的web工程做了,web.xml也没改,本地测试没问题就放到服务器上去了. 测试发现,走 http://服务器ip:8080/appname居然出 ...