V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
simonguo
V2EX  ›  前端开发

前端数据校验从建模开始

  •  1
     
  •   simonguo · 2018-08-30 18:42:38 +08:00 · 1492 次点击
    这是一个创建于 2276 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端开发过程中你们觉得处理什么业务功能最烦人?

    做前端已经有很长一段时间了,不知道大家是否和我有同样的感受,在一些 Web 应用中表单处理起来比其他功能模块都麻烦,很多体力活,往往在数据的校验会很费时间。

    为了能够把这部分代码更有条理,我们把数据校验部分通过 Schema 预先定义一个数据模型,把数据扔进去,返回校验结果。

    接下来我介绍一下这个工具,schema-typed 是一个数据建模及数据验证工具, 它可以非常方便的设计的表单数据结构,当然它不限于在表单使用。如果你在产品中使用了 React , 那配合 React Suite 的表单组件简直就是如虎添翼。

    安装

    npm install schema-typed --save
    

    示例

    import { SchemaModel, StringType, DateType, NumberType } from 'schema-typed';
    
    const userModel = SchemaModel({
      username: StringType().isRequired('用户名不能为空'),
      email: StringType().isEmail('请输入正确的邮箱'),
      age: NumberType('年龄应该是一个数字').range(18, 30, '年龄应该在 18 到 30 岁之间')
    });
    
    const checkResult = userModel.check({
      username: 'foobar',
      email: '[email protected]',
      age: 40
    });
    
    console.log(checkResult);
    

    checkResult 返回结构是:

    {
        username: { hasError: false },
        email: { hasError: false },
        age: { hasError: true, errorMessage: '年龄应该在 18 到 30 岁之间' }
    }
    

    多重验证

    StringType()
      .minLength(6, '不能少于 6 个字符')
      .maxLength(30, '不能大于 30 个字符')
      .isRequired('该字段不能为空');
    

    自定义验证

    通过 addRule 函数自定义一个规则。

    如果是对一个字符串类型的数据进行验证,可以通过 pattern 方法设置一个正则表达式进行自定义验证。

    const myModel = SchemaModel({
      field1: StringType().addRule((value, data) => {
        return /^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/.test(value);
      }, '请输入合法字符'),
      field2: StringType().pattern(/^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/, '请输入合法字符')
    });
    
    schema.check({ field1: '', field2: '' });
    
    /**
    {
      field1: {
        hasError: true,
        errorMessage: '请输入合法字符'
      },
      field2: {
        hasError: true,
        errorMessage: '请输入合法字符'
      }
    };
    **/
    

    自定义验证 - 多字段交叉验证

    例如,验证两次输入密码是否一致

    const schema = SchemaModel({
      password1: StringType().isRequired('该字段不能为空'),
      password2: StringType().addRule((value, data) => {
        if (value !== data.password1) {
          return false;
        }
        return true;
      }, '两次密码不一致')
    });
    
    schema.check({ password1: '123456', password2: 'root' });
    
    /**
    {
      password1: { hasError: false },
      password2: {
        hasError: true,
        errorMessage: '两次密码不一致'
      }
    };
    **/
    

    API

    • StringType
    • NumberType
    • ArrayType
    • DateType
    • ObjectType
    • BooleanType

    StringType

    • isRequired()
    StringType().isRequired('该字段不能为空');
    
    • isEmail(String: errorMessage)
    StringType().isEmail('请输入正确的邮箱地址');
    
    • isURL(String: errorMessage)
    StringType().isURL('请输入正确的 URL 地址');
    
    • isOneOf(Array: items, String: errorMessage)
    StringType().isOneOf(['Javascript', 'CSS'], '只能输入 `Javascript`和 `CSS`');
    
    • containsLetter(String: errorMessage)
    StringType().containsLetter('必须包含英文字符');
    
    • containsUppercaseLetter(String: errorMessage)
    StringType().containsUppercaseLetter('必须包含大写的英文字符');
    
    • containsLowercaseLetter(String: errorMessage)
    StringType().containsLowercaseLetter('必须包含小写的英文字符');
    
    • containsLetterOnly(String: errorMessage)
    StringType().containsLetterOnly('只能包含的英文字符');
    
    • containsNumber(String: errorMessage)
    StringType().containsNumber('必须包含数字');
    
    • pattern(Object: regexp, String: errorMessage)
    StringType().pattern(/^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/, '请输入合法字符');
    
    • rangeLength(Number: minLength, Number: maxLength, String: errorMessage)
    StringType().rangeLength(6, 30, '字符个数只能在 6 - 30 之间');
    
    • minLength(Number: minLength, String: errorMessage)
    StringType().minLength(6, '最小需要 6 个字符');
    
    • maxLength(Number: maxLength, String: errorMessage)
    StringType().minLength(30, '最大只能 30 个字符');
    
    • addRule(Function: onValid, String: errorMessage)
    StringType().addRule((value, data) => {
      return /^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/.test(value);
    }, '请输入合法字符');
    

    NumberType

    • isRequired()
    NumberType().isRequired('该字段必填');
    
    • isInteger(String: errorMessage)
    NumberType().isInteger('只能是整型');
    
    • isOneOf(Array: items, String: errorMessage)
    NumberType().isOneOf([5, 10, 15], '只能是`5`,`10`,`15`');
    
    • pattern(Object: regexp, String: errorMessage)
    NumberType().pattern(/^[1-9][0-9]{3}$/, '请输入合法字符');
    
    • range(Number: minLength, Number: maxLength, String: errorMessage)
    NumberType().range(18, 40, '请输入 18 - 40 之间的数字');
    
    • min(Number: min, String: errorMessage)
    NumberType().min(18, '最小值 18');
    
    • max(Number: min, String: errorMessage)
    NumberType().max(40, '最大值 40');
    
    • addRule(Function: onValid, String: errorMessage)
    NumberType().addRule((value, data) => {
      return value % 5 === 0;
    }, '请输入有效的数字');
    

    ArrayType

    • isRequired()
    ArrayType().isRequired('该字段必填');
    
    • rangeLength(Number: minLength, Number: maxLength, String: errorMessage)
    ArrayType().rangeLength(1, 3, '至少选择 1 个,但不能超过 3 个');
    
    • minLength(Number: minLength, String: errorMessage)
    ArrayType().minLength(1, '至少选择 1 个');
    
    • maxLength(Number: maxLength, String: errorMessage)
    ArrayType().maxLength(3, '不能超过 3 个');
    
    • unrepeatable(String: errorMessage)
    ArrayType().unrepeatable('不能出现重复选项');
    
    • of(Object: type, String: errorMessage)
    ArrayType().of(StringType().isEmail(), '格式错误');
    
    • addRule(Function: onValid, String: errorMessage)
    ArrayType().addRule((value, data) => {
      return value.length % 2 === 0;
    }, '好事成双');
    

    DateType

    • isRequired()
    DateType().isRequired('日期不能为空');
    
    • range(Date: min, Date: max, String: errorMessage)
    DateType().range(
      new Date('08/01/2017'),
      new Date('08/30/2017'),
      '时间应该在 08/01/2017 - 08/30/2017 之间'
    );
    
    • min(Date: min, String: errorMessage)
    DateType().min(new Date('08/01/2017'), '时间的最小值 08/01/2017');
    
    • max(Date: max, String: errorMessage)
    DateType().max(new Date('08/30/2017'), '时间的最大值 08/30/2017');
    
    • addRule(Function: onValid, String: errorMessage)
    DateType().addRule((value, data) => {
      return value.getDay() === 2;
    }, '只能选择周二');
    

    ObjectType

    • isRequired()
    ObjectType().isRequired('该对象不能为空');
    
    • shape(Object: types)
    ObjectType().shape({
      email: StringType().isEmail('应该是一个 email'),
      age: NumberType().min(18, '年龄应该大于 18 岁')
    });
    
    • addRule(Function: onValid, String: errorMessage)
    ObjectType().addRule((value, data) => {
      if (value.id || value.email) {
        return true;
      }
      return false;
    }, 'id 与 email 必须有一个不能为空');
    

    BooleanType

    • isRequired()
    BooleanType().isRequired('该字段不能为空');
    
    • addRule(Function: onValid, String: errorMessage)
    ObjectType().addRule((value, data) => {
      if (typeof value === 'undefined' && A === 10) {
        return false;
      }
      return true;
    }, '当 A 等于 10 的时候,该值必须为空');
    
    4 条回复    2018-08-30 19:53:18 +08:00
    lrz0lrz
        1
    lrz0lrz  
       2018-08-30 19:18:58 +08:00
    已 star
    xxx749
        2
    xxx749  
       2018-08-30 19:40:52 +08:00 via Android
    已星
    page470075640
        3
    page470075640  
       2018-08-30 19:47:32 +08:00 via Android
    有没有考虑加上异步验证 顺便推销下我的实践: https://github.com/pagewang0/form-validation
    learnshare
        4
    learnshare  
       2018-08-30 19:53:18 +08:00
    我比较喜欢 Angular 1.* 的表单模块,校验规则和样式 /UI 直接挂钩,更贴近原生组件的机制
    https://docs.angularjs.org/guide/forms#binding-to-form-and-control-state

    2 往后没怎么写过,就不了解了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2523 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:28 · PVG 23:28 · LAX 07:28 · JFK 10:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.