<!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. jQuery EasyUI---validatebox 校验规则扩展

    EasyUI 的 validatebox 插件, 验证规则相对比较单一也比较少,如下. rules: { email:{ validator: function(value){ return ...? ...

  2. JS：checkFrom对输入框和文本框的判断总结

    天看了老东家的一个专题页面,发现里边的checkFrome.js收集了很多对文本框的判断,非常有用收藏一下.其中包含了:1.页面截取字符串2.文本框最大长度限制3.判断必须是数字和字母的组合4.判断是 ...

  3. spring3 mvc：方法返回值的学习

    新建后台代码用以测试返回类型,在这里我新建的如下: /** * 项目名称:Spring3mvc demo * Copyright ? 2010-2012 spartacus.org.cn All Ri ...

  4. Using Change Management and Change Control Within a Project

    In any project, change is inevitable whether it comes from within the project or from external sourc ...

  5. busybox rx 命令

    rx命令使用xmodem传送文件,只需要串口线就传送. 在文件系统输入如下命令,传送文件到板子上,板子上保存文件的名称为file rx file 在secureCRT中选择Transfer->S ...

  6. C#对象的声明与实例化

    在代码中我们经常能看到下面这样的语句. A a = new A();(1) B b = null;(2) C c;(3) 代码( 1 ) 创建 A 的对象并对其进行初始化. A :类: new A() ...

  7. 给Windows机器创建软连接

    给Windows机器创建软连接 http://blog.csdn.net/w6611415/article/details/32084677

  8. java 中集合和数组互相转换

    package test; import java.util.Arrays;import java.util.List; /** * Created by Administrator on 2016/ ...

  9. Object类型（对象）

    ECMAscript中的对象其实就是一组数据和功能集合.这里简单谈谈对象,复杂以后补充. 1 如何创建对象 简单创建: var box = {}; alert(box); //[object obje ...

  10. ChatForFun 公众号使用说明

    使用方法 2016-07-16 DennisMi ChatForFun 1,发送  #1 实现登陆,或者退出登陆 2,发送  #2 实现加入聊天,和退出聊天 3,聊天开始后,可以直接发送消息 4,如果 ...