前端做非空校验的所有方式，列出来，以及代码，怎么使用

前端做非空校验的方式有以下几种：

1. HTML5 的 required 属性

<form>
  <input type="text" name="username" required>
  <button type="submit">提交</button>
</form>

在表单元素中添加 required 属性，如果用户未填写该字段，提交表单时会提示用户必须填写该字段。

2. JavaScript 的 if 语句

<form>
  <input type="text" name="username">
  <button type="submit" onclick="submitForm()">提交</button>
</form>

<script>
function submitForm() {
  var username = document.getElementsByName('username')[0].value;
  if (username === '') {
    alert('用户名不能为空');
    return false;
  }
}
</script>

使用 if 语句判断输入框的 value 是否为空，如果为空则提示用户必须填写该字段。

3. JavaScript 的正则表达式

<form>
  <input type="text" name="username">
  <button type="submit" onclick="submitForm()">提交</button>
</form>

<script>
function submitForm() {
  var username = document.getElementsByName('username')[0].value;
  if (/^\s*$/.test(username)) {
    alert('用户名不能为空');
    return false;
  }
}
</script>

使用正则表达式判断输入框的 value 是否为空或只包含空格，如果是则提示用户必须填写该字段。

4. jQuery 的 validate 插件

<form id="myform">
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
$(function() {
  $('#myform').validate({
    rules: {
      username: {
        required: true
      }
    },
    messages: {
      username: {
        required: '用户名不能为空'
      }
    }
  });
});
</script>

使用 jQuery 的 validate 插件可以快速进行表单验证，包括非空校验、长度限制、邮箱格式验证、手机号码格式验证等等。

5. Vue.js 的表单验证

<div id="app">
  <form>
    <input type="text" v-model="username">
    <button type="submit" @click.prevent="submitForm">提交</button>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    username: ''
  },
  methods: {
    submitForm: function() {
      if (this.username === '') {
        alert('用户名不能为空');
        return false;
      }
    }
  }
});
</script>

使用 Vue.js 的表单验证功能可以对表单进行非空校验、长度限制、邮箱格式验证、手机号码格式验证等等。

6. React.js 的表单验证

import React, { useState } from 'react';

function App() {
  const [username, setUsername] = useState('');

  function submitForm() {
    if (username === '') {
      alert('用户名不能为空');
      return false;
    }
  }

  return (
    <div>
      <form>
        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
        <button type="submit" onClick={submitForm}>提交</button>
      </form>
    </div>
  );
}

export default App;

使用 React.js 的表单验证功能可以对表单进行非空校验、长度限制、邮箱格式验证、手机号码格式验证等等。