UNPKG

cloud-ui.vusion

Version:
40 lines (36 loc) 1.49 kB
# 表单项 ## 示例 ### 基本形式 ``` vue <template> <u-linear-layout direction="vertical"> <u-form-item :rules="rules"> <u-input maxlength="112" placeholder="4~12位字母、数字或中划线组成"></u-input> </u-form-item> <u-form-item title="用户名" :rules="rules"> <u-input maxlength="112" placeholder="4~12位字母、数字或中划线组成"></u-input> </u-form-item> <u-form-item :rules="rules" placement="bottom"> <u-input maxlength="112" placeholder="4~12位字母、数字或中划线组成"></u-input> </u-form-item> <u-form-item title="用户名" :rules="rules" placement="bottom"> <u-input maxlength="112" placeholder="4~12位字母、数字或中划线组成"></u-input> </u-form-item> </u-linear-layout> </template> <script> export default { data() { return { rules: [ { type: 'string', required: true, trigger: 'blur', message: '请输入用户名' }, { type: 'string', pattern: /^[a-zA-Z]/, trigger: 'input+blur', message: '以字母开头' }, { type: 'string', pattern: /^[a-zA-Z0-9-]+$/, trigger: 'input+blur', message: '字母、数字或中划线组成' }, { type: 'string', pattern: /[a-zA-Z0-9]$/, trigger: 'blur', message: '以字母或数字结尾' }, { type: 'string', min: 4, trigger: 'blur', message: '不得少于4个字符' }, ], }; }, }; </script> ```