thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
components/firstui/fui-form/fui-form.vue Normal file
View File

@ -0,0 +1,253 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 4 0 7 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-form__wrap"
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0}">
<slot></slot>
<view class="fui-form__msg-wrap"
:style="{top:top+'px',left:left+'rpx',right:right+'rpx',background:getBgColor,borderRadius:radius+'rpx'}"
v-if="show" :class="{'fui-form__msg-bg':!getBgColor,'fui-form__msg-show':errorMsg}"><text
class="fui-form__text" :style="{fontSize:size+'rpx',color:color}">{{errorMsg}}</text></view>
<view class="fui-form__mask" v-if="disabled"></view>
</view>
</template>
<script>
import form from './fui-validator.js'
export default {
name: "fui-form",
props: {
//表单padding值（上，右，下，左），同css顺序
padding: {
type: Array,
default () {
return []
}
},
//是否显示校验错误信息
show: {
type: Boolean,
default: true
},
//是否禁用该表单内的所有组件,透明遮罩层
disabled: {
type: Boolean,
default: false
},
//提示框top值 px
top: {
type: [Number, String],
// #ifdef H5
default: 44
// #endif
// #ifndef H5
default: 0
// #endif
},
left: {
type: [Number, String],
default: 24
},
right: {
type: [Number, String],
default: 24
},
//错误提示框背景色
background: {
type: String,
default: ''
},
//错误提示字体大小
size: {
type: [Number, String],
default: 28
},
//错误提示字体颜色
color: {
type: String,
default: '#fff'
},
//错误提示框圆角值
radius: {
type: [Number, String],
default: 16
},
//错误消息显示时间 ms
duration: {
type: Number,
default: 2000
},
//form-item标题字体大小 默认使用全局设置值
labelSize: {
type: [Number, String],
default: 0
},
labelColor: {
type: String,
default: ''
},
//form-item label宽度,单位rpx 默认使用全局设置值
labelWidth: {
type: [Number, String],
default: 0
},
//label 对齐方式：left，right
labelAlign: {
type: String,
default: ''
},
labelWeight: {
type: [Number, String],
default: 0
},
// form-item 必填项星号颜色
asteriskColor: {
type: String,
default: ''
},
//left,right
asteriskPosition: {
type: String,
default: ''
}
},
provide() {
return {
form: this
}
},
computed: {
getBgColor() {
let color = this.background;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.danger) || '#FF2B2B';
}
// #endif
return color;
}
},
data() {
return {
errorMsg: '',
timer: null
};
},
// #ifndef VUE3
beforeDestroy() {
this.clearTimer()
},
// #endif
// #ifdef VUE3
beforeUnmount() {
this.clearTimer()
},
// #endif
methods: {
clearTimer() {
clearTimeout(this.timer)
this.timer = null;
},
/*
@param model 表单数据对象
@param rules 表单验证规则
@param checkAll 校验所有元素
*/
validator(model, rules, checkAll = false) {
return new Promise((resolve, reject) => {
try {
let res = form.validator(model, rules, checkAll);
if (!res.isPassed && this.show) {
this.clearTimer()
let errors = res.errorMsg;
if (checkAll) {
errors = errors[0].msg
}
this.errorMsg = errors;
this.timer = setTimeout(() => {
this.errorMsg = ''
}, this.duration)
}
resolve(res)
} catch (e) {
reject({
isPassed: false,
errorMsg: '校验出错，请检查传入的数据格式是否有误！'
})
}
})
}
}
}
</script>
<style scoped>
.fui-form__wrap {
/* #ifndef APP-NVUE */
width: 100%;
box-sizing: border-box;
/* #endif */
flex: 1;
position: relative;
}
.fui-form__msg-wrap {
padding: 24rpx;
position: fixed;
z-index: 900;
text-align: center;
/* #ifndef APP-NVUE */
box-sizing: border-box;
display: flex;
word-break: break-all;
/* #endif */
align-items: center;
justify-content: center;
opacity: 0;
/* #ifdef APP-NVUE */
transform: translateY(-100%);
transition-property: transform, opacity;
/* #endif */
/* #ifndef APP-NVUE */
transform: translate3d(0, -100%, 0);
visibility: hidden;
transition-property: all;
/* #endif */
transition-duration: 0.25s;
transition-delay: 0s;
transition-timing-function: ease-in-out;
}
/* #ifndef APP-NVUE */
.fui-form__msg-bg {
background: var(--fui-color-danger, #FF2B2B) !important;
}
/* #endif */
.fui-form__text {
text-align: center;
}
.fui-form__msg-show {
/* #ifndef APP-NVUE */
visibility: visible;
transform: translate3d(0, 0, 0);
/* #endif */
/* #ifdef APP-NVUE */
transform: translateY(0);
/* #endif */
opacity: 1;
}
.fui-form__mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
z-index: 99;
}
</style>

335
components/firstui/fui-form/fui-validator.js Normal file
View File

@ -0,0 +1,335 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 14 07 25 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
/**
* 表单验证
* https://doc.firstui.cn/
**/
const form = {
/*
非必填情况下，如果值为空则不进行校验
*/
validator: function(formData, rules, checkAll = false) {
let result = {
isPassed: true,
errorMsg: checkAll ? [] : ''
};
for (let item of rules) {
const key = item.name;
const rule = item.rule || [];
const validator = item.validator || [];
const msgArr = item.msg || [];
const ruleLen = rule.length;
const validatorLen = validator.length;
if (!key || (ruleLen === 0 && validatorLen === 0) || (!~rule.indexOf("required") &&
formData[key].toString()
.length === 0)) {
continue;
}
if (ruleLen) {
for (let i = 0; i < ruleLen; i++) {
let ruleItem = rule[i];
let msg = msgArr[i] || `${key} error !`;
if (!ruleItem) continue;
//数据处理
let value = null;
if (~ruleItem.indexOf(":")) {
let temp = ruleItem.split(":");
ruleItem = temp[0];
value = temp[1];
}
let isError = false;
switch (ruleItem) {
case "required":
isError = form._isNullOrEmpty(formData[key]);
break;
case "isMobile":
isError = !form._isMobile(formData[key]);
break;
case "isEmail":
isError = !form._isEmail(formData[key]);
break;
case "isCarNo":
isError = !form._isCarNo(formData[key]);
break;
case "isIdCard":
isError = !form._isIdCard(formData[key]);
break;
case "isAmount":
isError = !form._isAmount(formData[key]);
break;
case "isNumber":
isError = !form._isNumber(formData[key]);
break;
case "isChinese":
isError = !form._isChinese(formData[key]);
break;
case "isNotChinese":
isError = !form._isNotChinese(formData[key]);
break;
case "isEnglish":
isError = !form._isEnglish(formData[key]);
break;
case "isEnAndNo":
isError = !form._isEnAndNo(formData[key]);
break;
case "isEnOrNo":
isError = !form._isEnOrNo(formData[key]);
break;
case "isSpecial":
isError = form._isSpecial(formData[key]);
break;
case "isEmoji":
isError = form._isEmoji(formData[key]);
break;
case "isDate":
isError = !form._isDate(formData[key]);
break;
case "isUrl":
isError = !form._isUrl(formData[key]);
break;
case "isSame":
isError = !form._isSame(formData[key], formData[value]);
break;
case "range":
let range = null;
try {
range = JSON.parse(value);
if (range.length <= 1) {
throw new Error("range值传入有误！")
}
} catch (e) {
return "range值传入有误！"
}
isError = !form._isRange(formData[key], range[0], range[1])
break;
case "minLength":
isError = !form._minLength(formData[key], value)
break;
case "maxLength":
isError = !form._maxLength(formData[key], value)
break;
case "isKeyword":
isError = !form._isKeyword(formData[key], value)
break;
default:
break;
}
if (isError) {
result.isPassed = false;
if (checkAll) {
result.errorMsg.push({
name: key,
msg: msg
})
break;
} else {
result.errorMsg = msg;
return result;
}
}
}
}
if (validatorLen) {
for (let model of validator) {
let func = model.method;
if (func && !func(formData[key])) {
result.isPassed = false;
if (checkAll) {
const index = result.errorMsg.findIndex(item => item.name === key)
if (index === -1) {
result.errorMsg.push({
name: key,
msg: model.msg || `${key} error !`
})
}
break;
} else {
result.errorMsg = model.msg || `${key} error !`;
return result;
}
}
}
}
}
return result;
},
//允许填写字符串null或者undefined
_isNullOrEmpty: function(value) {
return (value === null || value === '' || value === undefined) ? true : false;
},
_isMobile: function(value) {
return /^(?:13\d|14\d|15\d|16\d|17\d|18\d|19\d)\d{5}(\d{3}|\*{3})$/.test(value);
},
_isEmail: function(value) {
return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value);
},
_isCarNo: function(value) {
// 新能源车牌
const xreg =
/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
// 旧车牌
const creg =
/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
if (value.length === 7) {
return creg.test(value);
} else if (value.length === 8) {
return xreg.test(value);
} else {
return false;
}
},
_isIdCard: function(value) {
let idCard = value;
if (idCard.length == 15) {
return this.__isValidityBrithBy15IdCard;
} else if (idCard.length == 18) {
let arrIdCard = idCard.split("");
if (this.__isValidityBrithBy18IdCard(idCard) && this.__isTrueValidateCodeBy18IdCard(arrIdCard)) {
return true;
} else {
return false;
}
} else {
return false;
}
},
__isTrueValidateCodeBy18IdCard: function(arrIdCard) {
let sum = 0;
let Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];
let ValideCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];
if (arrIdCard[17].toLowerCase() == 'x') {
arrIdCard[17] = 10;
}
for (let i = 0; i < 17; i++) {
sum += Wi[i] * arrIdCard[i];
}
let valCodePosition = sum % 11;
if (arrIdCard[17] == ValideCode[valCodePosition]) {
return true;
} else {
return false;
}
},
__isValidityBrithBy18IdCard: function(idCard18) {
let year = idCard18.substring(6, 10);
let month = idCard18.substring(10, 12);
let day = idCard18.substring(12, 14);
let temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
if (temp_date.getFullYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 ||
temp_date.getDate() !=
parseFloat(day)) {
return false;
} else {
return true;
}
},
__isValidityBrithBy15IdCard: function(idCard15) {
let year = idCard15.substring(6, 8);
let month = idCard15.substring(8, 10);
let day = idCard15.substring(10, 12);
let temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
if (temp_date.getYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 ||
temp_date.getDate() !=
parseFloat(day)) {
return false;
} else {
return true;
}
},
_isAmount: function(value) {
//是否为金额，只允许保留两位小数
return /^([0-9]*[.]?[0-9])[0-9]{0,1}$/.test(value);
},
_isNumber: function(value) {
//是否全为数字
return /^[0-9]+$/.test(value);
},
//是否全部为中文
_isChinese: function(value) {
let reg = /^[\u4e00-\u9fa5]+$/;
return value !== "" && reg.test(value) && !form._isSpecial(value) && !form._isEmoji(value)
},
//是否不包含中文，可以有特殊字符
_isNotChinese: function(value) {
let reg = /.*[\u4e00-\u9fa5]+.*$/;
let result = true;
if (reg.test(value)) {
result = false
}
return result
},
_isEnglish: function(value) {
return /^[a-zA-Z]*$/.test(value)
},
_isEnAndNo: function(value) {
//4~30位数字和字母组合
return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,30}$/.test(value);
},
_isEnOrNo: function(value) {
let reg = /^[A-Za-z0-9]+$/;
return reg.test(value)
},
_isSpecial: function(value) {
//是否包含特殊字符
let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
if (regEn.test(value) || regCn.test(value)) {
return true;
}
return false;
},
_isEmoji: function(value) {
//是否包含表情
return /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(value);
},
_isDate: function(value) {
//2019-10-12
const reg =
/^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
return reg.test(value);
},
_isUrl: function(value) {
return /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})(:[0-9]{1,5})?((\/?)|(\/[\\\w_!~*\\'()\\\.;?:@&=+$,%#-]+)+\/?)$/
.test(value);
},
_isSame: function(value1, value2) {
return value1 === value2
},
_isRange: function(value, range1, range2) {
if ((!range1 && range1 != 0) && (!range2 && range2 != 0)) {
return true;
} else if (!range1 && range1 != 0) {
return value <= range2
} else if (!range2 && range2 != 0) {
return value >= range1
} else {
return value >= range1 && value <= range2
}
},
_minLength: function(value, min) {
return value.length >= Number(min)
},
_maxLength: function(value, max) {
return value.length <= Number(max)
},
_isKeyword: function(value, keywords) {
//是否包含关键词，敏感词，多个以英文逗号分隔，包含则为false,弹出提示语！
let result = true;
if (!keywords) return result;
let key = keywords.split(',');
for (let i = 0, len = key.length; i < len; i++) {
if (~value.indexOf(key[i])) {
result = false;
break;
}
}
return result;
}
};
export default {
validator: form.validator
}