第六节：Vue3 开发 WordPress 设置选项 - 添加对象传值和数据校验

1
const datas = reactive({
2
  dataOne: "",
3
  dataTwo: "",
4
  dataName: [],
5
  dataImage: "",
6
  dataSelectedImage: "",
7
});

1
  let datas = reactive({
2

3
      npc_zfb_appid: "",
4
      npc_zfb_private_key: "",
5
      npc_zfb_public_key: "",
6

7
      npc_wx_mch_id: "",
8
      npc_wx_cert_api: "",
9
      npc_wx_cert_key: "",
10

11
  });

1
  let datas = reactive({
2

3
    zfb: {
4
      npc_zfb_appid: "",
5
      npc_zfb_private_key: "",
6
      npc_zfb_public_key: "",
7
    },
8
    wx: {
9
      npc_wx_mch_id: "",
10
      npc_wx_cert_api: "",
11
      npc_wx_cert_key: "",
12
    },
13
    npc_refund_user: [],
14
  });

1
//读取Option
2
//支持数组类数据请求
3
function get_option_by_RestAPI($data)
4
{
5
    // 将输入数据转换成数组类型
6
    $dataArray = json_decode($data->get_body(), true);
7
    $return = array();
8
    // 遍历数组，检查每个元素是否为对象
9
    foreach ($dataArray as $option_name => $value) {
10
        // 初始化当前选项的值数组
11
        $option_value = array();
12
        // 如果当前元素是一个非空数组，则遍历其中的每个字段
13
        if (is_array($value) && !empty($value)) {
14
            foreach ($value as $field_name => $field_value) {
15
                // 获取指定选项的值，如果不存在，则使用空字符串代替
16
                $option_value[$field_name] = get_option($field_name, '');
17
            }
18
            // 将当前选项及其值添加到返回数组中
19
            $return[$option_name] = $option_value;
20
        } else {
21
            // 如果当前元素非数组或数组为空，获取指定选项的值
22
            $return[$option_name] = get_option($option_name, '');
23
        }
24
    }
25
    return $return; // 返回所有选项的键值对
26
}

1
//存储选项值
2
const datas = reactive({
3
//省略
4
  check: {
5
    name: "",
6
    phone: "",
7
  },
8
});

1
//获取数据
2
const get_option = () => {
3
  axios
4
    .post(dataLocal.route + "pf/v1/get_option", datas, {
5
      headers: {
6
        "X-WP-Nonce": dataLocal.nonce,
7
        "Content-Type": "application/json",
8
      },
9
    })
10
    .then((response) => {
11
      //省略
12
      datas.check.name = data.check.name;
13
      datas.check.phone = data.check.phone;
14
    })
15
    .catch((error) => {
16
      window.alert("连接服务器失败或后台读取出错！数据读取失败");
17
      console.log(error);
18
    });
19
};

1
//验证名称
2
const isName = computed(() => {
3
  // 正则表达式验证名字，2到6个中文字符
4
  const reg = /^[u4e00-u9fa5]{2,6}$/;
5
  return reg.test(datas.check.name);
6
});
7
//验证电话号码
8
const isPhone = computed(() => {
9
  // 正则表达式验证电话号码
10
  const reg = /^1[3456789]d{9}$/;
11
  return reg.test(datas.check.phone);
12
});

1
  <h3>数据校验</h3>
2
  姓名：<input type="text" v-model="datas.check.name" />
3
  <p v-if="!isName" class="check">格式错误 - 必须为两字到六字中文</p>
4
  <br />
5
  手机号：<input type="text" v-model="datas.check.phone" />
6
  <p v-if="!isPhone" class="check">格式错误 - 必须是1开头的11位手机号</p>
7
  <hr />