@sweetui/sweet-mobile

表单验证

验证组件 el-form sweet-form-item 参考饿了么的el-form el-form-item

文档参数具体参考饿了么官网

校验规则参见 async-validator

表单组件 input 使用 sweet-input demo

// 这里 sweet-form-item 的 class="sweet-input-form" 必须有,
 <sweet-form-item prop="name" class="sweet-input-form">
   <sweet-input v-model="formData.name" type="text" placeholder="Name"/>
 </sweet-form-item>

表单组件 单选和多选 使用 sweet-group

sweet-group组件的参数数码

参数	类型	默认值	说明
data	array	[]	数据列表
type	string	radio	单选or多选(checkbox)
name	string	-	表单的名称

注:data值必须是一组对象，并且还有value属性，下面是demo

  [
    {value: 'facebook1', title: 'Facebook1 Radio'},
    {value: 'facebook2', title: 'Facebook2 Radio'}
  ]
                 

checkbox demo

// 这里 sweet-form-item 的 class="sweet-group-form" 必须有
// template 的 v-if="scope" 必须有
<sweet-form-item prop="checkVal" class="sweet-group-form">
  <sweet-group :data="checkList" name="demo-checkbox" type="checkbox" v-model="formData.checkVal">
    <!--自定义radio|checkbox的html 模版-->
    <template slot-scope="{scope}" v-if="scope">
       <div>{{scope.title}}</div>
    </template>
  </sweet-group>
  <!--radio checkbox 使用隐藏的input进行校验-->
  <input v-model="formData.checkBox" type="hidden">
</sweet-form-item>

radio demo

// 这里 sweet-form-item 的 class="sweet-group-form" 必须有
// template 的 v-if="scope" 必须有
<sweet-form-item prop="radioVal" class="sweet-group-form">
  <sweet-group :data="radioList" name="demo-checkbox" v-model="formData.radioVal">
    <!--自定义radio|checkbox的html 模版-->
    <template slot-scope="{scope}" v-if="scope">
       <div>{{scope.title}}</div>
    </template>
  </sweet-group>
  <!--radio checkbox 使用隐藏的input进行校验-->
  <input v-model="formData.radioVal" type="hidden">
</sweet-form-item>