平台兼容性

插件说明

表单验证插件来自 graceUI - 一套基于uni-app的优秀前端框 【提供了丰富的组件及界面库。大幅度提高开发速度 ^_^】 graceUI 是一款成熟完善的、为uni-app量身打造的ui框架! 经过近半年的升级维护( graceUI 在更新方面极为勤奋,我们会持续更新!)已经成为组件多、界面丰富、运行稳定的 uni-app 专业UI框架 自发布以来已经至少有2000名开发者使用! 2019年4月15日 graceUI2.0 uni-app版本正式发布!2.0 从新出发、从心出发!新的开始我们将持续更新更多的、更漂亮、更实用的组件和界面!

graceUI 官网

http://grace.hcoder.net 首页视频教程第一节可观看组件演示 (:

使用说明

1 将 graceChecker.js 部署到您的项目目录,如 :

|_ 项目根目录
    |_ common
        |_ graceChecker.js

2 引用 graceChecker

var  graceChecker = require("../../../common/graceChecker.js");

验证步骤

1、定义验证规则
var rule = [
    {name:"数据键名称", checkType: "验证类型", checkRule: "验证规则", errorMsg: "错误提示信息" },
    ......
];
如
var rule = [
    { name: "nickname", checkType: "string", checkRule: "1,3", errorMsg: "姓名应为1-3个字符" },
    { name: "gender", checkType: "in", checkRule: "男,女", errorMsg: "请选择性别" },
      { name: "bd", checkType: "notsame", checkRule: "请选择", errorMsg: "请选择生日" },
      { name: "aihao", checkType: "notnull", checkRule: "", errorMsg: "请选择爱好" },
      { name: "email", checkType: "email", checkRule: "", errorMsg: "请填写您的邮箱" }
];

验证类型及规则

1. string
功能 : 字符串及长度检查
规则 : 最小长度,最大长度 如 1,3 或 2, 2,代表只检查最短
2. int
功能 : 整数及长度检查
规则 : 最小长度,最大长度 如 1,3
3. between
功能 : 数值区间检查
规则 : 最小值,最大值 如 1,3 或 2.5,1000
4. betweenD
功能 : 数值区间检查【整数】
规则 : 最小值,最大值 如 1,3 或 2,1000
5. same
功能 : 等值检查
规则 : 对应的值
6. notsame
功能 : 不等值检查
规则 : 对应的值
7. email
功能 : 邮箱检查
规则 : 无需设置
8. phoneno
功能 : 11位手机号检查
规则 : 无需设置
9. zipcode
功能 : 6位邮编检查
规则 : 无需设置
10. reg
功能 : 正则表达式检查
规则 : 正则表达式内容 如 "^[0-9]{1,2}$"
11. in
功能 : 包含某个字符串的检查
规则 : 字符串集,如:"北京,上海"
12. notnull
功能 : 不为空检查【null 或者 空数组】
规则 : 无需设置

演示代码

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="uni-padding-wrap">
            <form @submit="formSubmit" @reset="formReset">
                <view>
                    <view class="uni-title">姓名</view>
                    <view class="uni-list">
                        <view class="uni-list-cell">
                            <input class="uni-input" name="nickname" placeholder="请填写您的昵称" />
                        </view>
                    </view>
                </view>
                <view>
                    <view class="uni-title">性别</view>
                    <radio-group class="uni-flex" name="gender">
                        <label>
                            <radio value="男" />男</label>
                        <label>
                            <radio value="女" />女</label>
                    </radio-group>
                </view>
                <view>
                    <view class="uni-title">爱好</view>
                    <checkbox-group class="uni-flex" name="loves">
                        <label>
                            <checkbox value="读书" />读书</label>
                        <label>
                            <checkbox value="写字" />写字</label>
                    </checkbox-group>
                </view>
                <view class="uni-btn-v uni-common-mt">
                    <button class="btn-submit" formType="submit" type="primary">Submit</button>
                    <button type="default" formType="reset">Reset</button>
                </view>
            </form>
        </view>
    </view>
</template>
<script>
    //来自 graceUI 的表单验证, 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
    var  graceChecker = require("../../../common/graceChecker.js");
    export default {
        data() {
            return {
                title: '表单验证',
            }
        },
        methods: {
            formSubmit: function (e) {
                //将下列代码加入到对应的检查位置
                //定义表单规则
                var rule = [
                    {name:"nickname", checkType : "string", checkRule:"1,3",  errorMsg:"姓名应为1-3个字符"},
                    {name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
                    {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
                ];
                //进行表单检查
                var formData = e.detail.value;
                var checkRes = graceChecker.check(formData, rule);
                if(checkRes){
                    uni.showToast({title:"验证通过!", icon:"none"});
                }else{
                    uni.showToast({ title: graceChecker.error, icon: "none" });
                }
            },
            formReset: function (e) {
                console.log("清空数据")
                this.chosen = ''
            }
        }
    }
</script>

<style>
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问