表单校验规则

时间校验

使用element-ui的datePicker组件选择时间，

传递的表单里用户的时间格式为：，所以这里value=“2022-11-02“

校验规则：用户输入时间必须在的当前系统时间之后。

export function timeRule(rule, value, callback) {
    let time = new Date();
    // value.join(" ");
    let year = time.getFullYear().toString();
    let month = (time.getMonth() + 1).toString();
    let date = time.getDate().toString();
    let dateValue = value.split("-");
    if (value === "") {
        callback(new Error("请输入入校时间"));
    } else if (year === dateValue[0]) {
        if (month === dateValue[1] && date >= dateValue[2]) {
            callback();
        } else if (month > dateValue[1]) {
            callback();
        }
    } else if (year > dateValue[0]) {
        callback();
    } else {
        callback(new Error("用户选择的时间错误，还未到时间"));
    }
}

难点：

1、系统时间如果不转换对象为string，就直接比较的话，结果不对

2、因为系统月份是从0开始计算的，所以获取到的系统的月份会比生活中的少1，所以获取的系统月份需要加一

3、用户输入的时间格式处理，注意几个常用的字符串的使用方法：

str.split("-"); 把str字符串根据“-”符号，将str字符串进行拆分成数组

str.join("-"); 将str数组中的元素用“-”进行连接

str.replace(“/”, "-") 将str字符数组中的第一个"/"，替换成"-"

以及根据需要选择获取时间的方法：

let time = new Date();

time.toTimeString()

time.toDateString()

time.toLocaleDateString()

time.toLocaleTimeString()

time.toLocaleString() = time.toLocaleDateString() + time.toLocaleTimeString()

2、 element-ui的datePicker组件，设置属性，实现根据当前选择日期，禁用超前日期==》不用额外校验时间，只做非空校验判断。

<template>
  <div class="InfoList">
        <el-form-item
          label="入校时间"
          :label-width="formLabelWidth"
          prop="time"
        >
          <el-date-picker
            v-model="newUserForm.time"
            align="right"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy/MM/dd"
            type="date"
            placeholder="选择入校日期"
            :picker-options="pickAfter"
          >
          </el-date-picker>
        </el-form-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickAfter: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 如果没有后面的-8.64e7就是可以选择今天的
        },
      }
    };
  },
 
};
</script>

如果是想要效果：，那么修改一下。灵感来源

disabledDate(time) {
		          return time.getTime() < Date.now() - 8.64e7// 如果没有后面的-8.64e7就是不可以选择今天的
		        }

敏感词校验

1、文件存储敏感词

<script type="text/javascript">
    // -------------- 全局变量，用来判断文本域中是否包含脏词,默认为false,即不包含脏词-------
    var isDirty = false;
    //使用ActiveX读取本地文件获取dirtyword词库 
    function readFile(){   
      //var ForReading = 1;
      var fso = new ActiveXObject("Scripting.FileSystemObject");
      openF = fso.OpenTextFile("c:\\ciku.txt", 1);
      var cikuStr= openF.ReadAll();
      return cikuStr;
    }
    /*
    * 提交表单的主方法
    * 在提交表单的时候对内容进行过滤并在文本域显示过滤后的内容
    */
    function submitForm1() {
      var messageValue=document.getElementById("message").value;
      var cikuStr=readFile();
      var cikuArr= new Array();                 //定义数组,存储敏感词
      cikuArr=cikuStr.split(" ");               //敏感字符分割         
      for (var i=0;i<cikuArr.length;i++){
        var flag=cikuArr[i];
        if(messageValue.indexOf(flag)>=0){          //查找文本域中是否包含敏感字符，是则替换
          filterWord(messageValue);        
          var ifs=confirm("你的留言中含有不恰当的词语,系统已自动为你修改,是否继续提交?");
          break;
        }else{                        //无敏感字符，直接提交表单
          document.getElementById("message_board").submit();
          break;
        }      
      }
      if(ifs){                        //用户点击确定，则提交表单
        document.getElementById("message_board").submit();
      }  
    }
    /*
    * 对传进来的messageValue过滤并返回新内容   
    */
    function filterWord(messageValue){
      // 根据文本域的id获取文本域对象内容
      var cikuStr=readFile();
      var cikuArr= new Array();                 //定义数组,存储敏感词
      cikuArr=cikuStr.split(" ");               //敏感字符分割到数组内       
      for (var i=0;i<cikuArr.length;i++){
        messageValue=filterOneWord(messageValue,cikuArr[i]);//filterOneWord函数每次替换一个字符，需循环调用
      }    
      document.getElementById("message").value=messageValue; //将替换后的内容显示到文本域中 
    }
    /*
    * 这个函数用来过滤单个词语, 如果messageValue中含有oneDirtyWord, 则用"**"替换这个oneDirtyWord
    * messageValue --- 要过滤的语句
    */
    function filterOneWord(messageValue,oneDirtyWord){       
      var str=messageValue.replace(new RegExp(oneDirtyWord,'g'),"**");
      return str;         
    }
   </script>

2、本地数组存储敏感词

//敏感词过滤
export function forbiddenStrRule(rule, value, callback) {
    //定义敏感字符
    let forbiddenArray = ['xx', '<', '>', '黄色', 'sb', 'fuck', 'md', 'laji', '靠', 'nm', 'tm', 'tmd', 'c'];
    for (var i = 0; i < forbiddenArray.length; i++) {
        value = value.replace(forbiddenArray[i], "*");
    }
    callback();
}

年龄校验

校验规则：学生年龄一般在十几岁到三十岁之间

可以根据需求需改下面的正则表达式。

//新增用户的年龄校验
export function ageRule(rule, value, callback) {
    //   6-12位密码需要包含大小写字母和数字以及特殊符号
    let age = /^([1-3]|[0-9]{2})$/;
    if (value === "") {
        callback(new Error("请输入年龄"));
    } else if (!age.test(value)) {
        callback(new Error("用户年龄不合理"));
    } else {
        callback();
    }
}

姓名校验

//新增用户的姓名校验
export function newUsernameRule(rule, value, callback) {
    //   6-12位密码需要包含大小写字母和数字以及特殊符号
    let CName = /^(?:[\u4e00-\u9fa5·]{2,16})$/;
    let EName = /(^[a-zA-Z][a-zA-Z\s]{0,20}[a-zA-Z]$)/;
    if (value === "") {
        callback(new Error("请输入姓名"));
    } else if (!(CName.test(value) || EName.test(value))) {
        callback(new Error("请输入中文姓名或者20位字母以内的英文名"));
    }else {
        let forbiddenArray = ['xx', '<', '>', '黄色', 'sb', 'fuck', 'md', 'laji', '靠', 'nm', 'tm', 'tmd', 'c'];
        for (var i = 0; i < forbiddenArray.length; i++) {
            value = value.replace(forbiddenArray[i], "*");
        }
        callback();
    }
}

时间校验

难点：

敏感词校验

年龄校验

姓名校验

猜你喜欢