Vue: EasyUI--Form(基本表单)

Form(基本表单)

1.用法

<Form ref="form" :model="user" :rules="rules" @validate="errors=$event">
  <div style="margin-bottom:20px">
    <Label for="name" align="top">Name:</Label>
    <TextBox inputId="name" name="name" v-model="user.name"></TextBox>
    <div class="error">{{getError('name')}}</div>
  </div>
  <div style="margin-bottom:20px">
    <Label for="email" align="top">Email:</Label>
    <TextBox inputId="email" name="email" v-model="user.email"></TextBox>
    <div class="error">{{getError('email')}}</div>
  </div>
  <div style="margin-bottom:20px">
    <Label for="hero" align="top">Select a hero:</Label>
    <ComboBox inputId=hero name="hero" :data="heroes" v-model="user.hero"></ComboBox>
    <div class="error">{{getError('hero')}}</div>
  </div>
  <div style="margin-bottom:20px">
    <CheckBox inputId="accept" name="accept" v-model="user.accept"></CheckBox>
    <Label for="accept">Accept Me</Label>
  </div>
  <div style="margin-bottom:20px">
    <LinkButton :disabled="false" @click="submitForm()">Submit</LinkButton>
  </div>
</Form>

2.属性

名称	类型	描述
model	Object	表单数据。
rules	Object	验证规则，代码实例:

rules: {
	name: ["required", "length[5,10]"],
	email: "email",
	hero: "required",
	addr: {
		"required":true,
		"myrule":{
			"validator": (value) => {
				if (...){
					return true;
				} else {
					return Promise(resolve => {
						//...
						resolve(true);
					});
				}
			},
			"message": "my error message."
		}
	}
}

3.方法

名称	参数	返回值	描述
validate	none	volid	验证所有表单规则。
validateField	名称	volid	验证指定字段的规则。

//validate 的代码示例：
this.$refs.form.validate((valid) => {
	//...
})
//validateField的代码示例：
this.$refs.form.validateField('addr', (valid) => {
	//...
})

4.事件

名称	参数	描述
validate	valid	验证字段时触发

示例

<template>
  <div>
    <h2>Validate Form</h2>
    <Form ref="form" :model="user" :rules="rules" @validate="errors=$event">
      <div style="margin-bottom:20px">
        <Label for="name" align="top">Name:</Label>
        <TextBox inputId="name" name="name" v-model="user.name"></TextBox>
        <div class="error">{{getError('name')}}</div>
      </div>
      <div style="margin-bottom:20px">
        <Label for="email" align="top">Email:</Label>
        <TextBox inputId="email" name="email" v-model="user.email"></TextBox>
        <div class="error">{{getError('email')}}</div>
      </div>
      <div style="margin-bottom:20px">
        <Label for="hero" align="top">Select a hero:</Label>
        <ComboBox inputId=hero name="hero" :data="heroes" v-model="user.hero"></ComboBox>
        <div class="error">{{getError('hero')}}</div>
      </div>
      <div style="margin-bottom:20px">
        <CheckBox inputId="accept" name="accept" v-model="user.accept"></CheckBox>
        <Label for="accept">Accept Me</Label>
      </div>
      <div style="margin-bottom:20px">
        <LinkButton :disabled="false" @click="submitForm()">Submit</LinkButton>
      </div>
    </Form>
    <p>{{user}}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      user: {
        name: null,
        email: null,
        hero: null,
        accept: false
      },
      rules: {
        name: ["required", "length[5,10]"],
        email: "email",
        hero: "required"
      },
      errors: {},
      heroes: [
        { value: 11, text: "Mr. Nice" },
        { value: 12, text: "Narco" },
        { value: 13, text: "Bombasto" },
        { value: 14, text: "Celeritas" },
        { value: 15, text: "Magneta" },
        { value: 16, text: "RubberMan" },
        { value: 17, text: "Dynama" },
        { value: 18, text: "Dr IQ" },
        { value: 19, text: "Magma" },
        { value: 20, text: "Tornado" }
      ]
    };
  },
  methods: {
    getError(name) {
      return this.errors[name] && this.errors[name].length
        ? this.errors[name][0]
        : null;
    },
    hasError(name) {
      return this.getError(name) != null;
    },
    submitForm(){
        this.$refs.form.validate((valid) => {
 
        })
    }
  }
};
</script>
 
<style>
.error {
  color: red;
  font-size: 12px;
  margin: 4px 0;
}
</style>