请完善上一个回答中的代码，要求当输入框失去焦点时给出验证提示

好的，以下是完善后的代码：

<input type="text" id="username" placeholder="请输入用户名" onblur="checkUsername()">

<script>
function checkUsername() {
  var username = document.getElementById("username").value;
  var pattern = /^[a-zA-Z]\w{5,17}$/;
  if (pattern.test(username)) {
    // 验证通过
    document.getElementById("username").style.border = "1px solid green";
  } else {
    // 验证不通过
    document.getElementById("username").style.border = "1px solid red";
    alert("用户名格式不正确，请重新输入！");
  }
}
</script>

在输入框失去焦点时，调用 `checkUsername()` 函数进行验证。如果验证通过，则将边框设置为绿色，表示格式正确；如果验证不通过，则将边框设置为红色，并弹出提示框，告知用户重新输入。

相关问题

请生成一段代码，为登陆表单添加验证功能，验证用户名和密码不能为空，且至少6个字符，当输入框失去焦点和用户点击登录按钮时给出验证提示

好的，以下是一个简单的示例代码，用于为登录表单添加验证功能：

HTML 代码：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required minlength="6">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required minlength="6">
  <br>
  <button type="submit">登录</button>
</form>

JavaScript 代码：

const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');

// 添加失去焦点事件监听器
usernameInput.addEventListener('blur', validateUsername);
passwordInput.addEventListener('blur', validatePassword);

// 添加提交事件监听器
const form = document.querySelector('form');
form.addEventListener('submit', validateForm);

function validateUsername() {
  const username = usernameInput.value;
  if (username.length < 6) {
    usernameInput.setCustomValidity('用户名至少6个字符');
  } else {
    usernameInput.setCustomValidity('');
  }
}

function validatePassword() {
  const password = passwordInput.value;
  if (password.length < 6) {
    passwordInput.setCustomValidity('密码至少6个字符');
  } else {
    passwordInput.setCustomValidity('');
  }
}

function validateForm(event) {
  const username = usernameInput.value;
  const password = passwordInput.value;
  if (username.length < 6 || password.length < 6) {
    event.preventDefault(); // 阻止表单提交
    alert('用户名和密码都必须至少6个字符');
  }
}

这段代码会在输入框失去焦点或用户点击登录按钮时，验证用户名和密码是否合法。如果不合法，会显示相应的提示信息。如果用户名和密码都合法，会允许用户提交表单。

请使用Vue和element-ui生成一段代码，为登陆表单添加验证功能，验证用户名和密码不能为空，且至少6个字符，当输入框失去焦点和用户点击登录按钮时给出验证提示

好的，以下是使用Vue和element-ui框架生成的示例代码，用于为登录表单添加验证功能：

HTML 代码：

<template>
  <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" style="width: 400px;">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="loginForm.username" auto-complete="off" @blur="validateUsername"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="loginForm.password" type="password" auto-complete="off" @blur="validatePassword"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>

JavaScript 代码：

import { reactive } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

export default {
  components: { ElForm, ElFormItem, ElInput, ElButton },
  setup() {
    // 定义表单数据和验证规则
    const loginForm = reactive({
      username: '',
      password: '',
    });
    const loginRules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 6, message: '用户名至少6个字符', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码至少6个字符', trigger: 'blur' },
      ],
    };

    // 定义验证函数
    function validateUsername() {
      const { username } = loginForm;
      if (username.length < 6) {
        return Promise.reject(new Error('用户名至少6个字符'));
      } else {
        return Promise.resolve();
      }
    }

    function validatePassword() {
      const { password } = loginForm;
      if (password.length < 6) {
        return Promise.reject(new Error('密码至少6个字符'));
      } else {
        return Promise.resolve();
      }
    }

    // 定义提交函数
    function submitForm() {
      const { $refs } = this;
      $refs.loginForm.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
          console.log('表单数据：', loginForm);
        } else {
          // 表单验证不通过，给出错误提示
          console.log('表单验证不通过');
          return false;
        }
      });
    }

    return { loginForm, loginRules, validateUsername, validatePassword, submitForm };
  },
};

这段代码会使用Vue和element-ui框架创建一个登录表单，同时为用户名和密码添加验证功能。当输入框失去焦点或用户点击登录按钮时，会显示相应的验证提示。如果用户名和密码都合法，会允许用户提交表单。