feat(Design): 完善填空题输入类型并添加验证
- 新增数字和小数填空类型 - 添加输入限制和验证功能 - 优化文本类型填空的验证逻辑 - 修复了一些与填空题相关的小问题
This commit is contained in:
@@ -18,6 +18,29 @@
|
||||
></contenteditable>
|
||||
</template>
|
||||
<template #input>
|
||||
<el-input-number
|
||||
v-model="completionValue"
|
||||
v-if="element.config.text_type === 1"
|
||||
type="number"
|
||||
class="other_input"
|
||||
controls-position="right"
|
||||
:max="element.config.max"
|
||||
@blur="changeValue"
|
||||
style="padding: 0; background: #fff"
|
||||
></el-input-number>
|
||||
|
||||
<el-input-number
|
||||
v-model="completionValue"
|
||||
v-else-if="element.config.text_type === 2"
|
||||
:precision="element.config.decimal_few"
|
||||
:max="element.config.max"
|
||||
type="number"
|
||||
controls-position="right"
|
||||
class="other_input"
|
||||
@blur="changeValue"
|
||||
style="padding: 0; background: #fff"
|
||||
></el-input-number>
|
||||
<div v-else style="width: 92%">
|
||||
<textarea
|
||||
v-if="!element.config.line_height || element.config.line_height != 0"
|
||||
v-model="completionValue"
|
||||
@@ -25,15 +48,17 @@
|
||||
:placeholder="element.config.placeholder"
|
||||
:rows="element.config.line_height"
|
||||
></textarea>
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { toRefs } from 'vue';
|
||||
|
||||
const completionValue = defineModel('completionValue', { default: '', type: String });
|
||||
import { toRefs, watch } from 'vue';
|
||||
import { ElInputNumber } from 'element-plus';
|
||||
import { showFailToast } from 'vant';
|
||||
const completionValue = defineModel('completionValue', { default: null, type: String });
|
||||
const props = defineProps({
|
||||
isPreview: {
|
||||
type: Boolean,
|
||||
@@ -58,12 +83,33 @@ const errorMessage = defineModel('errorMessage', {
|
||||
type: String,
|
||||
default: ''
|
||||
});
|
||||
|
||||
// 创建一个本地副本以保存更改
|
||||
const emit = defineEmits(['update:element']);
|
||||
const { element } = toRefs(props);
|
||||
const emitValue = () => {
|
||||
emit('update:element', element.value);
|
||||
};
|
||||
watch(
|
||||
() => completionValue.value,
|
||||
() => {
|
||||
if (!completionValue.value) {
|
||||
completionValue.value = null;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const changeValue = (values) => {
|
||||
console.log(element.value.config);
|
||||
if (
|
||||
completionValue.value < element.value.config.min &&
|
||||
element.value.config.min &&
|
||||
completionValue.value
|
||||
) {
|
||||
completionValue.value = null;
|
||||
showFailToast('请输入大于' + element.value.config.min + '的数字');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -658,6 +658,7 @@ async function answer(callback, callbackBeforePage) {
|
||||
if (questionType === 6) {
|
||||
return;
|
||||
}
|
||||
|
||||
let isError = false;
|
||||
// 如果问题没有答案还有是必须填空的,就往下处理
|
||||
// 2025/4/1新增 : 如果有 error 内容, 同样视为有错误
|
||||
@@ -683,7 +684,12 @@ async function answer(callback, callbackBeforePage) {
|
||||
// 分类题
|
||||
question.error = translatedText.value.PleaseCategorizeAllOptions;
|
||||
} else if (!question.error) {
|
||||
console.log(question);
|
||||
if (question.config.is_required === 1) {
|
||||
question.error = translatedText.value.ThisIsARequiredQuestion;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
answer &&
|
||||
@@ -735,6 +741,78 @@ async function answer(callback, callbackBeforePage) {
|
||||
isError = true;
|
||||
question.error = translatedText.value.PleaseUploadAtLeastOneFiles(config.min_number);
|
||||
} else if (answer && questionType === 4) {
|
||||
// 矩阵填空题
|
||||
question.error = '';
|
||||
|
||||
if (question.config.is_required === 1 || answer.value) {
|
||||
switch (config.text_type) {
|
||||
// 字母
|
||||
case 3:
|
||||
if (
|
||||
!/^[a-zA-Z·~!@#¥%…&*()—\-+={}|《》?:“”【】、;‘’,。`!$^()_<>?:",./;'\\[\]]+$/.test(
|
||||
answer.value
|
||||
)
|
||||
) {
|
||||
question.error = translatedText.value.PleaseEnterEnglishLetters;
|
||||
}
|
||||
break;
|
||||
// 中文
|
||||
case 4:
|
||||
if (
|
||||
!/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~!@#¥%…&*()—\-+={}|《》?:“”【】、;‘’,。`!$^()_<>?:",./;'\\[\]])+$/.test(
|
||||
answer.value
|
||||
)
|
||||
) {
|
||||
question.error = translatedText.value.PleaseEnterChineseWords;
|
||||
}
|
||||
break;
|
||||
// 邮箱
|
||||
case 5:
|
||||
if (
|
||||
!/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
||||
answer.value
|
||||
)
|
||||
) {
|
||||
question.error = translatedText.value.PleaseEnterACorrectEmail;
|
||||
}
|
||||
break;
|
||||
// 手机号
|
||||
case 6:
|
||||
if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(answer.value)) {
|
||||
question.error = translatedText.value.PleaseEnterACorrectPhone;
|
||||
}
|
||||
break;
|
||||
// 身份证号
|
||||
case 7:
|
||||
if (
|
||||
!/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
|
||||
answer.value
|
||||
)
|
||||
) {
|
||||
question.error = translatedText.value.PleaseEnterACorrectID;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (![5, 6, 7].includes(config.text_type)) {
|
||||
if (
|
||||
!question.error &&
|
||||
answer.value.length < config.min &&
|
||||
![1, 2].includes(config.text_type)
|
||||
) {
|
||||
question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
|
||||
}
|
||||
if (
|
||||
!question.error &&
|
||||
answer.value.length > config.max &&
|
||||
![1, 2].includes(config.text_type)
|
||||
) {
|
||||
question.error = translatedText.value.PleaseEnterLessCharacters(config.max);
|
||||
}
|
||||
}
|
||||
if (question.error) isError = true;
|
||||
}
|
||||
} else if (answer && questionType === 8) {
|
||||
// 矩阵填空题
|
||||
question.error = '';
|
||||
@@ -790,9 +868,23 @@ async function answer(callback, callbackBeforePage) {
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (!question.error && value.length < config.min && ![1, 2].includes(config.text_type)) {
|
||||
|
||||
if (![5, 6, 7].includes(config.text_type)) {
|
||||
if (
|
||||
!question.error &&
|
||||
value.length < config.min &&
|
||||
![1, 2].includes(config.text_type)
|
||||
) {
|
||||
question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
|
||||
}
|
||||
if (
|
||||
!question.error &&
|
||||
value.length > config.max &&
|
||||
![1, 2].includes(config.text_type)
|
||||
) {
|
||||
question.error = translatedText.value.PleaseEnterLessCharacters(config.max);
|
||||
}
|
||||
}
|
||||
});
|
||||
if (question.error) isError = true;
|
||||
} else if (questionType === 27 && question.error) {
|
||||
|
||||
Reference in New Issue
Block a user