<!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. Javascript实现提示错误的信息直接出现在输入框后

    可以在输入框后加个<span id="error"></span>,当验证错误时这样处理document.getElementById('error').i ...

  2. Android Keycode详解

    用JAVA写appium的testcase时,想用Android自带的物理返回键,网上找了下分享给大家. import io.appium.java_client.android.AndroidKey ...

  3. 关于ajax的异步通信之异步

    我有这样一个js函数 function add (){ $ajax({ url:"xxxxxx", data:""xxxxx", dataType:& ...

  4. net异步线程获取返回值的三种方式

    方式一:endInvoke using System; using System.Collections.Generic; using System.Text; using System.Thread ...

  5. LeetCode Flip Game II

    原题链接在这里:https://leetcode.com/problems/flip-game-ii/ 题目: You are playing the following Flip Game with ...

  6. Java: arr==null vs arr.length==0

    当 arr 是一个array时,写Java开始的corner case常常会写类似下面的语句: if(arr == null || arr.length == 0){ return 0; } 其实这是 ...

  7. php 如何进入mysql数据库

    我是初学者,有两台电脑,进入数据库通用的方法直接找mysql.exe,如下例: F:\Program Files\wamp\bin\mysql\mysql5.5.20\bin

  8. Spring第十一篇——–Spring整合Hibernate之配置数据源

    DataSource(数据源)提供了一个标准化的取得数据库连接的方式,通过getConnection()方法即可取得数据库的连接,Spring也提供了数据库连接池(DataBase connectio ...

  9. 微信连Wi-Fi专业设备列表

    微信连Wi-Fi是微信推出的快速连接Wi-Fi热点的功能.商户启用后,其顾客仅需通过微信“扫一扫”二维码等方式,即可快速连接商户提供的Wi-Fi免费上网.连接成功后,用户微信主界面顶部会出现“正在连接 ...

  10. 数据库笔记--常见sql操作

    1.数据库联表查询: 在实际项目中有时需要将两个表结合到一起进行查询,此处介绍其语法: 左连接查询:select * from tableA left join tableB on tableA.fi ...