Vue表单组件

这是一个十分简易的表单组件，它只用于进行表单验证，而几乎没有任何样式（除了错误提示以外），你可以把它用于任何设备稿中的表单。

• 支持：Vue2.x

安装

npm install shawbs-form - S

使用

import ShawbsForm from 'shawbs-form'
import 'shawbs-form/lib/index.css'


Vue.use(ShawbsForm)

Form

| props | 说明 | 是否必填 | 值 | | :-----| ----: | :----: | :----: | | model | 一个object对象，包含了表单中的各个属性 | 是 | Object | rules | 表单检验规则，支持require/reg/handle等3种方式 | 是 | Object

FormItem

| props | 说明 | 是否必填 | 值 | | :-----| ----: | :----: | :----: | | prop | 表单中的某个属性，它必须在Form的model中存在 | 是 | String

Form 方法

| 名 | 说明 | | :-----| ----: | | check | 验证表单是否有效，参数为Boolean，true是有效,false是无效 |

EXAMPLE

Code

<template>
    <div id="app">
        <h3>Example</h3>
        <shawbs-form :model="formData" :rules="rules" ref="form">
            <div>用户名</div>
            <shawbs-form-item prop="username">
                <input type="text" v-model="formData.username">
            </shawbs-form-item>
            <div>密码</div>
            <shawbs-form-item prop="password">
                <input type="text" v-model="formData.password">
            </shawbs-form-item>
            <div>确认密码</div>
            <shawbs-form-item prop="password2">
                <input type="text" v-model="formData.password2">
            </shawbs-form-item>
        </shawbs-form>

        <p>
            <button @click="submit">提交</button>
        </p>
    </div>
</template>

<script>
    export default {
        data(){
            const handle = (e) => {
                if(e == ''){
                    return '确认密码不能为空'
                }
                if(e != this.formData.password){
                    return '两次密码不一致'
                }
            }
            return {
                formData: {
                    username: '',
                    password: '',
                    password2: ''
                },
                rules: {
                    username: [{require: true,message: '用户名不能为空'}],
                    password: [{require: true,message: '密码不能为空'},{reg: /\w{6,8}$/, message: '密码无效'}],
                    password2: [{handle: handle}]
                }
            }
        },
        methods:{
            submit(){
                this.$refs.form.check(valid => {
                    console.log(valid)
                })
            }
        }
    }
</script>

<style lang="less" scoped>

</style>