feat: 接口名称的最大值校验

client/common.js

@@ -86,11 +86,28 @@ exports.handlePath = (path) => {
   return path;
 }
 
-// 返回字符串长度，汉字计数为2
-exports.strLength = (str) => {
-  let length = 0;
-  for (let i = 0; i < str.length; i++) {
-    str.charCodeAt(i) > 255 ? length += 2 : length++;
+// 名称限制 20 字符
+exports.nameLengthLimit = (type) => {
+  // 返回字符串长度，汉字计数为2
+  const strLength = (str) => {
+    let length = 0;
+    for (let i = 0; i < str.length; i++) {
+      str.charCodeAt(i) > 255 ? length += 2 : length++;
+    }
+    return length;
   }
-  return length;
+  // 返回 form中的 rules 校验规则
+  return [{
+    required: true,
+    validator(rule, value, callback) {
+      const len = value ? strLength(value) : 0;
+      if (len > 20) {
+        callback('请输入' + type + '名称，长度不超过20字符(中文算作2字符)!');
+      } else if (len === 0) {
+        callback('请输入' + type + '名称，长度不超过20字符(中文算作2字符)!');
+      } else {
+        return callback();
+      }
+    }
+  }]
 }

client/containers/AddProject/AddProject.js

@@ -10,7 +10,7 @@ const { TextArea } = Input;
 const FormItem = Form.Item;
 const Option = Select.Option;
 const RadioGroup = Radio.Group;
-import { pickRandomProperty, handlePath, strLength } from '../../common';
+import { pickRandomProperty, handlePath, nameLengthLimit } from '../../common';
 import constants from '../../constants/variable.js';
 import { withRouter } from 'react-router';
 import './Addproject.scss';
@@ -103,20 +103,7 @@ class ProjectList extends Component {
             label="项目名称"
           >
             {getFieldDecorator('name', {
-              rules: [{
-                required: true,
-                message: '请输入项目名称，长度不超过20字符(中文算2字符)!',
-                validator(rule, value, callback) {
-                  const len = value ? strLength(value) : 0;
-                  if (len > 20) {
-                    callback('请输入项目名称，长度不超过20字符(中文算2字符)!');
-                  } else if (len === 0) {
-                    callback('请输入项目名称，长度不超过20字符(中文算2字符)!');
-                  } else {
-                    return callback();
-                  }
-                }
-              }]
+              rules: nameLengthLimit('项目')
             })(
               <Input />
             )}

client/containers/Project/Interface/InterfaceList/AddInterfaceForm.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Form, Input, Select, Button } from 'antd';
 
 import constants from '../../../../constants/variable.js'
-import { handlePath } from '../../../../common.js'
+import { handlePath, nameLengthLimit } from '../../../../common.js'
 const HTTP_METHOD = constants.HTTP_METHOD;
 const HTTP_METHOD_KEYS = Object.keys(HTTP_METHOD);
 
@@ -83,9 +83,7 @@ class AddInterfaceForm extends Component {
           label="接口名称"
         >
           {getFieldDecorator('title', {
-            rules: [{
-              required: true, message: '清输入接口名称!'
-            }]
+            rules: nameLengthLimit('接口')
           })(
             <Input placeholder="接口名称" />
             )}

client/containers/Project/Interface/InterfaceList/InterfaceEditForm.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import _ from 'underscore'
 import constants from '../../../../constants/variable.js'
-import { handlePath } from '../../../../common.js'
+import { handlePath, nameLengthLimit } from '../../../../common.js'
 import json5 from 'json5'
 import {message} from 'antd'
 
@@ -96,7 +96,7 @@ class InterfaceEditForm extends Component {
 
   handleSubmit = (e) => {
     e.preventDefault();
-    
+
     this.props.form.validateFields((err, values) => {
       if (!err) {
         if (values.res_body_type === 'json') {
@@ -111,9 +111,9 @@ class InterfaceEditForm extends Component {
           }
           values.req_body_other = this.state.req_body_other;
         }
-        
-        
-        
+
+
+
         values.method = this.state.method;
         values.req_params = values.req_params || [];
         let isfile = false, isHavaContentType = false;
@@ -168,7 +168,7 @@ class InterfaceEditForm extends Component {
     mockEditor({
       container: 'req_body_json',
       data: that.state.req_body_other,
-      onChange: function (d) {   
+      onChange: function (d) {
         that.setState({
           req_body_other: d.text
         })
@@ -181,7 +181,7 @@ class InterfaceEditForm extends Component {
       onChange: function (d) {
         if (d.format === true){
           mockPreview.editor.setValue(d.mockText)
-        }        
+        }
         that.setState({
           res_body: d.text,
           res_body_mock: d.mockText
@@ -392,9 +392,7 @@ class InterfaceEditForm extends Component {
         >
           {getFieldDecorator('title', {
             initialValue: this.state.title,
-            rules: [{
-              required: true, message: '请输入接口名称!'
-            }]
+            rules: nameLengthLimit('接口')
           })(
             <Input placeholder="接口名称" />
             )}

client/containers/Project/Setting/ProjectMessage/ProjectMessage.js

@@ -12,7 +12,7 @@ const RadioGroup = Radio.Group;
 const RadioButton = Radio.Button;
 import constants from '../../../../constants/variable.js';
 const confirm = Modal.confirm;
-import { strLength } from '../../../../common';
+import { nameLengthLimit } from '../../../../common';
 import '../Setting.scss';
 // layout
 const formItemLayout = {
@@ -346,20 +346,7 @@ class ProjectMessage extends Component {
           >
             {getFieldDecorator('name', {
               initialValue: initFormValues.name,
-              rules: [{
-                required: true,
-                message: '请输入项目名称，长度不超过20字符(中文算2字符)!',
-                validator(rule, value, callback) {
-                  const len = value ? strLength(value) : 0;
-                  if (len > 20) {
-                    callback('请输入项目名称，长度不超过20字符(中文算2字符)!');
-                  } else if (len === 0) {
-                    callback('请输入项目名称，长度不超过20字符(中文算2字符)!');
-                  } else {
-                    return callback();
-                  }
-                }
-              }]
+              rules: nameLengthLimit('项目')
             })(
               <Input />
               )}