atui
Version:
components built with Vue.js
117 lines (113 loc) • 3 kB
Markdown
---
order: 0
title:
zh-CN: 规则验证，使用默认错误提示
en-US: Type
---
## zh-CN
## en-US
````jsx
<h3>手机号校验：</h3>
<p>校验结果：{{phoneValidResult.isPhoneValid.tips}}</p>
<div>
<v-input id="phone" type="text" placeholder="请输入手机号码" :rules="phoneValidRule" :valid-result="phoneValidResult"></v-input>
</div>
<br>
<h3>非空校验</h3>
<p>校验结果：{{notNullValidResult.requiredValid.tips}}</p>
<div>
<v-input type="text" placeholder="请输入内容" :rules="notNullValidRule" :valid-result="notNullValidResult" :tips="notNullTips"></v-input>
</div>
<br>
<h3>数字校验</h3>
<p>校验结果：{{isNumberValidResult.isNumberValid.tips}}</p>
<div>
<v-input type="text" placeholder="请输入数字" :rules="isNumberValidRule" :valid-result="isNumberValidResult"></v-input>
</div>
<br>
<h3>固话校验</h3>
<p>校验结果：{{isTelValidResult.isTelValid.tips}}</p>
<div>
<v-input type="text" placeholder="请输入固话号码" :rules="isTelValidRule" :valid-result="isTelValidResult"></v-input>
</div>
<br>
<h3>邮箱校验</h3>
<p>校验结果：{{isEmailValidResult.isEmailValid.tips}}</p>
<div>
<v-input type="text" placeholder="请输入邮箱" :rules="isEmailValidRule" :valid-result="isEmailValidResult"></v-input>
</div>
<br>
<h3>最小长度校验</h3>
<p>校验结果：{{minlengthValidResult.minlengthValid.tips}}</p>
<div>
<v-input type="text" placeholder="最小长度是5" minlength-tips="请输入至少5个字符" minlength="5" :valid-result="minlengthValidResult"></v-input>
</div>
<br>
<h3>自定义正则校验</h3>
<p>校验结果：{{validResult.regularValid.tips}}</p>
<div>
<v-input type="text" placeholder="自定义正则校验内容" :rules="rules" :valid-result="validResult"></v-input>
</div>
````
````vue-script
new Vue({
el: 'body',
components: {
vInput: atui.Input
},
data () {
return {
phoneValidRule: ['isPhone'],
phoneValidResult: {
isPhoneValid: {
validStatus: '',
tips: ''
}
},
phoneTips: '什么手机号？',
notNullValidRule: ['notNull'],
notNullValidResult: {
requiredValid: {
validStatus: '',
tips: ''
}
},
notNullTips: '',
isNumberValidRule: ['isNumber'],
isNumberValidResult: {
isNumberValid: {
validStatus: '',
tip: ''
}
},
isTelValidRule: ['isTelephone'],
isTelValidResult: {
isTelValid: {
validStatus: '',
tip: ''
}
},
isEmailValidRule: ['isEmail'],
isEmailValidResult: {
isEmailValid: {
validStatus: '',
tip: ''
}
},
minlengthValidResult: {
minlengthValid: {
validStatus: '',
tip: ''
}
},
rules: [/^[a-zA-Z]+$/],
validResult: {
regularValid: {
validStatus: '',
tip: ''
}
}
}
}
})
````