• angular表单验证实例----可用的代码


    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了

    angular里面对于表单验证,设置了很多指令。

    也就是说不用自己写一些逻辑,直接绑定指令就行。

    ng-app     启动你angular的模块

     ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上

    ng-options  循环你select里面的option标签,很好用的

     ng-submit,表单提交执行的

    novalidate  表单form配合后期检测的

    ng-model  实现双数据绑定

    ng-show 根据一定的逻辑实现显示

    ng-cloak 绑定在节点上,防止节点渲染,angular指令闪烁

    ng-class class类名根据你的逻辑,出现

    ng-required 检测你的input为不为空

    ng-pattern 正则表达式,绑定在input上面限制输入规范

    ng-maxlength 最多输入限制

    ng-minlength 最少输入限制

    ng-disabled="myForm.$invalid" 脏检测

    大概就需要这些指令了,大家不要喷我。谢谢

    下面开始上代码了,说一下呀

    LArea.js是一个移动端地址三联动弹出框,我就不解释了、、、、、、、、、、、、、、、、、、、
    jquery其实和angualr没有关系,主要是配合LArea.js使用
    <!DOCTYPE html>
    <html lang="en"  ng-app="myapp">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
        <title>礼品信息</title>
        <link rel="stylesheet" href="css/gift.css">
        <link rel="stylesheet" href="css/LArea.min.css">
        <script src="js/angularjs.js"></script>
        <script  type="text/javascript" src="js/LAreaData2.js"></script>
        <script  type="text/javascript" src="js/LArea.js"></script>
        <script src="js/gift1.js"></script>
    </head>
    <body>
        <div class="sub_form">
            <form name="myForm" ng-controller="gift"  ng-submit="save()" novalidate>
                <div class="info" ng-class="{'has-error':myForm.userName.$dirty && myForm.userName.$invalid}">
                    <label for="userName">真实姓名:</label>
                    <input type="text" name="userName" class="sub_txt" id="userName" placeholder="请填写真实姓名" ng-pattern=/^[u4e00-u9fa5]*$/ ng-model="userName" ng-minlength="2" ng-maxlength="10" ng-required="true">
                </div>
                <div ng-cloak ng-show="myForm.userName.$dirty && myForm.userName.$error.maxlength" class="info alert">
                        用户名长度不能超过10位
                </div>
                <div ng-cloak ng-show="myForm.userName.$dirty && myForm.userName.$error.minlength" class="info alert">
                        用户名长度不能小于5位
                </div>
                <div ng-cloak ng-show="myForm.userName.$dirty && myForm.userName.$error.pattern" class="info alert">
                        用户名不符合中文
                </div>
                <div ng-cloak ng-show="myForm.userName.$dirty && myForm.userName.$invalid &&myForm.userName.$error.required" class="info alert">
                        用户名不能为空
                </div>
                <!-- 电话 -->
                <div class="info" ng-class="{'has-error':myForm.mobile.$dirty && myForm.mobile.$invalid}">
        <label for="mobile">联系电话:</label>
        <input type="text" name="mobile" class="sub_txt" id="mobile" placeholder="请填写联系电话" ng-pattern=/^((d{3,4})|d{3,4}-|s)?d{7,14}$/ ng-model="mobile" ng-minlength="11" ng-maxlength="11" ng-required="true">
    </div>    
    <div ng-cloak ng-show="myForm.mobile.$dirty && myForm.mobile.$error.maxlength" class="info alert">
                        电话不能低于11位
                </div>
                <div ng-cloak ng-show="myForm.mobile.$dirty && myForm.mobile.$error.minlength" class="info alert">
                        电话不能低于11位
                </div>
                <div ng-cloak ng-show="myForm.mobile.$dirty && myForm.mobile.$error.pattern" class="info alert">
                        电话不符合
                </div>
                <div ng-cloak ng-show="myForm.mobile.$dirty && myForm.mobile.$invalid &&myForm.mobile.$error.required" class="info alert">
                        电话不能为空
                </div>
    <div class="info" ng-class="{'has-error':myForm.address.$dirty && myForm.address.$invalid}">
        <label for="address">收货区域:</label>
        <input type="text" name="address" id="details" class="sub_txt" placeholder="请填写收货地址" ng-model="address" ng-minlength="2" ng-required="true"  readonly="">
    </div>
                <div ng-cloak ng-show="myForm.address.$dirty && myForm.address.$invalid &&myForm.address.$error.required" class="info alert">
                        收货区域不能为空
                </div>
    
    <div class="info" ng-class="{'has-error':myForm.detaileDaddress.$dirty && myForm.detaileDaddress.$invalid}">
        <label for="detaileDaddress">详细地址:</label>
        <input type="text" name="detaileDaddress" id="detaileDaddress" class="sub_txt" placeholder="详细地址" 
        ng-model="detaileDaddress" ng-minlength="2" ng-required="true">
    </div>
    <div ng-cloak ng-show="myForm.detaileDaddress.$dirty && myForm.detaileDaddress.$invalid && myForm.detaileDaddress.$error.required" class="info alert">
                        详细地址不能为空
                </div>
                <div ng-cloak ng-show="myForm.mobile.$dirty && myForm.mobile.$error.minlength" class="info alert">
                        详细地址不能最少2个字符
                </div>
    
    <div class="info" ng-class="{'has-error':myForm.postcode.$dirty && myForm.postcode.$invalid}">
        <label for="postcode">邮编:</label>
        <input type="text" name="postcode" id="postcode" ng-model="postcode" class="sub_txt" placeholder="请填写邮编" ng-required="true">
    </div>
    <div ng-cloak ng-show="myForm.postcode.$dirty && myForm.postcode.$invalid &&myForm.postcode.$error.required" class="info alert">
          <span>邮编不能为空</span>
    </div>
    
    <div class="info">
        <label for="userName">所属单位:</label>
        <select name="company" class="sub_txt" id="company" placeholder="请填写所属单位" ng-options="x for x in dates" ng-model="dates[x]" ng-required="true">
            <option value="">请选择</option>
        </select>
    </div>
    <div class="btn_submit">
    <input type="submit" class="submit" ng-disabled="myForm.$invalid">
    </div>
            </form>
        </div>
    </body>
    <script type="text/javascript">
        var area = new LArea();
        area.init({
            'trigger': '#details',
            'valueTo': '#vale',
            'keys': {
                id: 'value',
                name: 'text'
            },
            'type': 2,
            'data': [provs_data, citys_data, dists_data]
        });
    </script>
    
    </html>

    下面是js文件了

    var app=angular.module("myapp",[]);
    app.controller('gift',function($scope,$http){
       $scope.dates=[
        "一院",
        "四院",
        "五院",
        "六院",
        "七院"
       ];
       $scope.save = function () {
            var myselect=document.getElementById("company");
            var index=myselect.selectedIndex ; 
            var companyVal=myselect.options[index].value;
            var companyText=myselect.options[index].text;
            //获取到表单是否验证通过
            if($scope.myForm.$valid){
                var datajson = {
                    userName:$scope.userName,
                    mobile:$scope.mobile,
                    address:$scope.address,
                    detaileDaddress:$scope.detaileDaddress,
                    postcode:$scope.postcode,
                    companyVal:companyVal,
                    companyText:companyText
                }   
                console.log(datajson);
                
           /* $http({
                method  : 'POST',
                url     : '',
                params    : pData,  
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
            })
            .success(function(data) {
               alert('表单通过');
            });*/
    
            }else{
                alert('表单没有通过验证');
            }
        }
    });

    解释下

    $http({
                method  : 'POST',
                url     : '',
                params    : pData,  
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
            })
            .success(function(data) {
               alert('表单通过');
            });
    和jquery的$.ajax一样,和后台交互的
     if($scope.myForm.$valid){
                var datajson = {
                    userName:$scope.userName,
                    mobile:$scope.mobile,
                    address:$scope.address,
                    detaileDaddress:$scope.detaileDaddress,
                    postcode:$scope.postcode,
                    companyVal:companyVal,
                    companyText:companyText
                } 
    $scope.你节点上的ng-model里面的数据
    这样能获取到你input里面的内容
    body,
    html {
      width: 100%;
    }
    a,
    a:active,
    a:hover {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      text-decoration: none;
    }
    img,
    legend {
      border: 0;
    }
    * {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    html {
      font-family: sans-serif;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }
    body {
      margin: 0;
      font-family: "Microsoft Yahei", "Helvetica Neue", helvetica, tahoma, arial, sans-serif;
      font-size: .24rem;
      background-color: #f2f2f2;
    }
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    menu,
    nav,
    section,
    summary {
      display: block;
    }
    audio,
    canvas,
    progress,
    video {
      display: inline-block;
      vertical-align: baseline;
    }
    dd,
    dl,
    dt,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    img,
    li,
    p,
    ul {
      margin: 0;
      padding: 0;
      font-weight: 400;
    }
    li {
      list-style: none;
    }
    audio:not([controls]) {
      display: none;
      height: 0;
    }
    [hidden],
    template {
      display: none;
    }
    a {
      background-color: transparent;
    }
    a:active,
    a:hover {
      outline: 0;
    }
    abbr[title] {
      border-bottom: 1px dotted;
    }
    b,
    optgroup,
    strong {
      font-weight: 700;
    }
    dfn {
      font-style: italic;
    }
    h1 {
      font-size: 2em;
    }
    mark {
      background: #ff0;
      color: #000;
    }
    small {
      font-size: 80%;
    }
    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    sup {
      top: -0.5em;
    }
    sub {
      bottom: -0.25em;
    }
    svg:not(:root) {
      overflow: hidden;
    }
    figure {
      margin: 1em 40px;
    }
    hr {
      box-sizing: content-box;
      height: 0;
    }
    pre,
    textarea {
      overflow: auto;
    }
    code,
    kbd,
    pre,
    samp {
      font-family: monospace,monospace;
      font-size: 1em;
    }
    button,
    input,
    optgroup,
    select,
    textarea {
      color: inherit;
      font: inherit;
      margin: 0;
    }
    button {
      overflow: visible;
    }
    button,
    select {
      text-transform: none;
    }
    button,
    html input[type=button],
    input[type=reset],
    input[type=submit] {
      -webkit-appearance: button;
      cursor: pointer;
    }
    button[disabled],
    html input[disabled] {
      cursor: default;
    }
    button::-moz-focus-inner,
    input::-moz-focus-inner {
      border: 0;
      padding: 0;
    }
    input {
      line-height: normal;
    }
    input[type=checkbox],
    input[type=radio] {
      box-sizing: border-box;
      padding: 0;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      height: auto;
    }
    input[type=search] {
      -webkit-appearance: textfield;
      box-sizing: content-box;
    }
    input[type=search]::-webkit-search-cancel-button,
    input[type=search]::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    fieldset {
      border: 1px solid silver;
      margin: 0 2px;
      padding: 0.35em 0.625em 0.75em;
    }
    legend {
      padding: 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    td,
    th {
      padding: 0;
    }
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border: 0px;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0;
    }
    input[type="number"] {
      -moz-appearance: textfield;
    }
    textarea,
    select,
    input {
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance: none;
      appearance: none;
    }
    a,
    select,
    button,
    input {
      -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
    }
    body {
      background: #ffffff;
    
    }
    .frame,.frames{
      width:100%;
      height:100%;
      background-color: rgba(0,0,0,0.8);
      position: fixed;
     display: none;
     z-index: 100000;
    }
    .parent,.parents{
      display:table-cell;
      vertical-align:middle;
    }
    #company{
     background: #ffffff; 
    }
    .chid,.chids{
      width:80%;
      margin:0px auto;
      background: #ffffff;
      border-radius: 6px;
      text-align: center;
      font-size: 20px;
      padding: 20px 0px;
    }
    .ch_title{
      display: inline-block;
      width:30%;
      float: left;
      font-size: 14px;
      text-align: right;
      padding-right:4%;
    }
    .ch_p{
      display: inline-block;
      overflow:hidden;
      word-break:break-all;
      width:65%;
      float: left;
      text-align: left;
      font-size: 14px;
      text-indent:0em;
    }
    .ch_value{
      width: 100%;
      margin:0px auto;
    }
    .modify{
      width: 100%;
      height:35px;
      margin:10px auto 0px auto;
    }
    .m_left{
      display: inline-block;
      width:30%;
      height: 32px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
      color: #ffffff;
      font-size: 14px;
      border: 0;
      background-color:#3399CC;
      border-radius: 16px;
      color: #ffffff; 
      float: left;
      margin-left: 10px;
    }
    .m_right{
      display: inline-block;
      width:30%;
      height: 32px;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
      color: #ffffff;
      font-size: 14px;
      border: 0;
      background-color:#FF6347;
      border-radius: 16px;
      color: #ffffff; 
      float: right;
      margin-right: 10px;
    }
    .titleTxt,.sub_form{
    width:96%;
    padding:2%;
    margin:0px auto;
    }
    .titleTxt>h5{
      font-size:30px;
      text-align: center;
      color:#FF6347;
      padding:10px 0px 20px 0px;
    }
    .p_txt{
      text-align:left;
      font-size:18px;
      line-height:30px;
    
    }
    .titleTxt span{
     color:#FF6347;
    }
    .p_font{
      text-align:left;
    }
    .sub_form p{
      font-size: 14px;
      color:#FF6347;
      text-align:left;
    }
    form{
      position: relative;
      z-index: 0;
    }
    .info{
      width: 100%;
      margin:0px auto 4px auto;
    
    
    }
    label{
      display: inline-block;
      width:25%;
      font-size:16px;
      text-align:right;
    }
    .sub_txt{
       display: inline-block;
        width: 70%;
        height:35px;
        margin-top:6px;
        font-size:16px;
        border: 0px;
    
    }
    .tip-bubble {
      display: block;
        background-color: #1cb596;
        width: 100%;
        padding: 4px 0px;
        color: #ffffff;
        text-align: center;
        border-radius: 4px;
    }
    .btn_submit{
      width: 100%;
      text-align: center;
    }
    .submit{
        display: inline-block;
        width: 80%;
        max-width: 320px;
        height: 32px;
        margin: 30px auto 0px auto;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
        color: #ffffff;
        font-size: 14px;
        border:0;
        background-color: #FF6347;
        border-radius: 16px;
        color:#ffffff;
        text-indent: 0em;
    
    }
    input{
      text-indent: 1em;
    }
    input:focus,select:focus {
        border-color: #66afe9;
        outline: 0;
    
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    }
    .has-error{
      color:red;
    }
    .has-error>input{
      border:1px solid red;
    }
    .alert{
      width: 100%;
      text-align: center;
      color:red;
      border-bottom: 1px solid red;
    }
    .none{
    display: none;
    }
    .showError{
      display: block;
    }

    css部分我就不说了

    这种写法其实不优化,主要体现出提示上,重复的节点出现多,在项目中尽量模板简洁,不要出现重复的节点,反正我看起来很刺眼。。。。

    下面我会把节点封装起来,把提示判断写在js逻辑里面,我觉得是一个优化的写法,大神不要喷我

  • 相关阅读:
    一条select语句的执行流程
    理解数据库的事物,ACID,cap
    java并发volatile和sychnorized的底层机制
    避免死锁的几种方式
    如何减少线程上下文切换
    RestTemplate设置超时时间
    spring事务隔离级别和传播级别
    mysql数据库与其他数据库的区别
    spingcloud组件注解汇总
    python二级选择题易错知识点总结
  • 原文地址:https://www.cnblogs.com/null11/p/6126821.html
Copyright © 2020-2023  润新知