form

by Kuitos Lau

HTML

<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<script src="//cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="//unpkg.com/ccms-components/ccms-components.js"></script>
<link rel="stylesheet" href="//unpkg.com/ccms-components/ccms-components.css">
<div ng-controller="appCtrl as app">

  <div>最简 用法(空间足够文字提示&使用form表单&内置的校验器)</div>
  <form class="form-wrapper" tooltip-type="major" name="app.hhh">
    <fieldset>
      <label for="info">姓名(必填)</label>
      <input type="text" id="info" ng-model="info" cc-validator required placeholder="必填">
    </fieldset>
    <fieldset>
      <label for="info1">邮箱</label>
      <input type="email" id="info1" ng-model="info1" required cc-validator placeholder="邮箱格式">
    </fieldset>
    <fieldset>
      <label for="info2">禁用</label>
      <input type="text" id="info2" disabled value="数云上海">
    </fieldset>

    <fieldset>
      <label for="info3">长度需大于3</label>
      <input type="text" id="info3" class="error" cc-validator ng-model="info3" minlength="3">
    </fieldset>

    <fieldset>
      <button type="submit" ng-click="app.reset(app.hhh)">重置</button>
    </fieldset>

  </form>
  <hr>

  <div>自定义校验器&不使用from/ngFrom表单空间不够浮动提示(默认)&可手动触发</div>
  <div class="form-wrapper" ng-form='app.gay' cc-validators="app.validators">
    <fieldset>
      <label for="info">姓名</label>
      <input type="text" ng-model="info11" cc-validator="handsome, letter" required required-msg="填东西啊忘扒蛋!">
    </fieldset>
    <fieldset>
      <label for="info1">数字</label>
      <input type="number" ng-model="info12" cc-validator="number" placeholder="请输入关键词" required>
    </fieldset>
    <fieldset>
      <label for="info2">禁用</label>
      <input type="text" disabled value="数云上海">
    </fieldset>

    <fieldset>
      <label for="info3">错误提示</label>
      <input type="text" class="error" cc-validator ng-model="info13"...

JavaScript

;
(function(angular, undefined) {

  'use strict';

  angular
    .module('app', ['ccms.components'])
    .controller('appCtrl', function($ccValidator) {

      this.validators = {

        required: '要填东西哦亲!', // 覆写 required 校验的提示信息

        number: /(^\s*$)|(^\d+$)/, // 覆写 number 校验的匹配规则

        handsome: { // 自定义校验规则
          msg: '不够帅',
          fn: (modelValue, viewValue) => {
            const value = modelValue || viewValue;
            return value ? value.startsWith('kuitos') : !value;
          }
        },

        letter: {
          msg: '必须为字母',
          regex: /(^\s*$)|(^\w+$)/
        }

      };

      this.reset = function(formCtrl) {
        $ccValidator.setPristine(formCtrl);
      };

      this.validateGay = function() {
        $ccValidator.validate(this.gay).then(() => {
          console.log('校验成功!');
        }, () => {
          console.log('校验失败!');
        });
      };

      this.validate = function() {

        $ccValidator.validate(this.guy).then(() => {
          console.log('校验成功!');
        }, () => {
          console.log('校验失败!');
        });

      };
    });

})(window.angular);