> For the complete documentation index, see [llms.txt](https://yanxiaojun617.gitbook.io/webpack4-bootstrap4-demo/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yanxiaojun617.gitbook.io/webpack4-bootstrap4-demo/use_html5_form_validation.md).

# 使用html5自带表单验证并且用ajax提交的说明

## 方法一

```markup
<!--onsubmit中的return不能省略-->
<form name="form" onsubmit="return login(form.username.value,form.password.value)">
    <input type="text" name="username" placeholder="请输入用户名" required>
    <input type="password" name="password" placeholder="请输入密码" required>
    <!--type必须是submit-->
    <button type="submit">登录</button>
</form>
```

```javascript
window.login=function(username, password){
    Http({
        url: '/v1/login',
        data: data, // 表单数据
        success: function (token) {
            window.location.href = 'invoice.html';
        }
    }).post();
    return false; // 这里必须return false
}
```

## 方法二，建议使用

```markup
<form>
    <input type="text" name="username" placeholder="请输入用户名" required>
    <input type="password" name="password" placeholder="请输入密码" required>
    <!--type必须是submit-->
    <button type="submit">登录</button>
</form>
```

```javascript
$('form').on('submit', function (ev) {
    Http({
        url: '/v1/login',
        data: data, // 表单数据
        success: function (token) {
            window.location.href = 'invoice.html';
        }
    }).post();
    // 阻止submit表单提交
    // ev.preventDefault();
    // 或者return false
    return false;
});
```