vue2使用van-field时，校验不通过时设置输入框边框样式为红色

在Vue 2中，使用vant-ui库的van-field组件进行表单验证时，当校验不通过，你可以利用van-field提供的`error-class-name`属性和自定义的CSS来改变输入框的边框样式。首先，在你的Vue组件中，你需要设置这个属性：

<template>
  <van-field v-model="formData.fieldName" :rules="fieldRules" error-class-name="custom-error">
    <!-- 其他form元素 -->
  </van-field>
</template>

<style scoped>
.custom-error {
  border-color: red; /* 设置为红色 */
}
</style>

在这个例子中，`formData.fieldName`是你想要校验的字段值，`fieldRules`是一个对象，用于定义校验规则。

然后，当你在`data()`函数中初始化数据并定义校验规则时，如果`formData.fieldName`不符合某个校验规则，`van-field`会自动应用`custom-error`类，使输入框边框变为红色：

export default {
  data() {
    return {
      formData: {
        fieldName: '',
      },
      fieldRules: {
        fieldName: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    };
  }
};