<!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. Activity初步，初学者必看

    Activity是什么? Activity是一个可与用户交互并呈现组件的视图.通俗说就是运行的程序当前的这个显示界面. 如果你还不明白,那么你写过HTML吗,它就好比一个网页.我们程序中的用户视图,都 ...

  2. interview review

    缘起: 因为最近要找工作,自己总结了一下面试的注意事项. 1自我介绍方法 1.基本情况:姓名.年龄.学历.家庭与理想. 简单明了,不要啰嗦. 2.学习能力:专业知识.勤奋好学. 用事实说明学习能力不错 ...

  3. 美国VPS - DigitalOcean 推荐创业团队使用

    初创公司DigitalOcean在美国正迅速成为一个家喻户晓的公司.每月5美元,该公司就可以让你享受到一个虚拟的私有服务器(或者说droplets,很多公司都这么称呼它).该公司的联合创始人兼首席执行 ...

  4. Fiddler-008-简单模拟性能测试

    通过 Fiddler 可以简单的模拟性能测试的并发测试,此方法非常的简单,直接讲述如何使用,敬请参阅! 首先我们要获取需要并发的 HTTP请求,此操作非常简单,则在此不再赘述.获取到响应的 HTTP请 ...

  5. 分布式服务框架dubbo原理解析 转

    alibaba有好几个分布式框架,主要有:进行远程调用(类似于RMI的这种远程调用)的(dubbo.hsf),jms消息服务(napoli.notify),KV数据库(tair)等.这个框架/工具/产 ...

  6. LeetCode Expression Add Operators

    原题链接在这里:https://leetcode.com/problems/expression-add-operators/ 题目: Given a string that contains onl ...

  7. mysql开发中使用存储过程

    在mysql开发中使用存储过程的理由: 当希望在不同的应用程序或平台上执行相同的函数,或者封装特定功能时,存储过程是非常有用的 mysql 执行语句是要先编译,然后再执行的.这样如果查询并发大的时候. ...

  8. 给你完美浪漫的七夕，APICloud送你双人电影票！

    我一直觉得“幸福的感觉” 就像存款 留着以后用 会幸福感爆棚 于是,我一直习惯于等等,再等等 以为那样就会很幸福 直到有一天,突然发现,在我构想的未来中,总是有你 世界那么大,我只在乎你 世界那么长, ...

  9. [BS] 小知识点总结-01

    1. UIImageView *imgView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"MainTitle&quo ...

  10. android UI进阶之用ViewPager实现欢迎引导页面

    ViewPager需要android-support-v4.jar这个包的支持,来自google提供的一个附加包.大家搜下即可. ViewPager主要用来组织一组数据,并且通过左右滑动的方式来展示. ...