html form表单以及表单自定义验证

因为在用Vue 的ui库的时候修改样式不太方便，因此这次决定自己写表单，虽然用js可以实现表单的功能且不用考虑form到底怎么使用的。但是还是想学习一下表单，毕竟这个校验的弹框还挺好看的，hhhhh~

首先浏览一下表单的文档html 表单 html form标签 html5 表单属性
先声明一下我这边是用vue写的项目

一、构建一个简单的登录的表单吧

   <form action="/test_api/users/login" method="post">
      <input type="number" 
            placeholder="请输入电话号码" 
            v-model="phone" 
            required />
      <input type="password" 
            placeholder="请输入密码" 
            v-model="password" 
            required />
      <button class="login_button" type="submit">登录</button>
    </form>

两行输入框，一个登录按钮，至于样式大家自己去调吧，为了美观一点，所以我是用了自己的demo（开始的那个图）

上面代码产生的效果

二、自定义校验

上面的代码只是加了required的校验，接下来我们给电话号码加一个自定义的校验，虽然直接用pattern属性就可以实现，但是为了记录一下如何自定义校验，就不用pattern了。
首先给输入电话号码的input添加一个监听事件@input=“change”

<form action="/test_api/users/login" method="post">
      <input type="number" 
            placeholder="请输入电话号码" 
            v-model="phone" 
            required
            ***对input的input事件进行监听***
            @input="change" />
      <input type="password" 
            placeholder="请输入密码" 
            v-model="password" 
            required />
      <button class="login_button" type="submit">登录</button>
    </form>

然后就是响应函数的代码
change(e)里面的参数(e)千万不能漏了

    change(e) {
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(e.target.value)) {
        e.target.setCustomValidity("请输入正确的手机号码");
      } else {
        e.target.setCustomValidity("");
      }
    }

这里的e就是事件，大家可以先console.log(e)来看看打印出来到底是个什么东西，
然后我们再console.log(e.target)看下是个啥，发现这e.target我们输入电话号码的input元素。
接下来console.log(e.target.validity)试试，这就是input元素的校验属性了

这里大家可以去看一篇别人的文章，我也是看他的学习的
链接在这里
还要一篇关于validity属性的文章，阔惜是英文，大家也阔以看看
链接又出现了
看完之后就知道，customError就是用来保存自定义校验是否通过的
现在我们再回过头来看change函数，就是简单的正则校验，如何没通过，就用setCustomValidity(“请输入正确的手机号码”)给个没通过的提示，如果通过了，就setCustomValidity(’’)把提示消息设为空，这样input的validity属性的customError自动为false，即校验成功。

   change(e) {
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(e.target.value)) {
        e.target.setCustomValidity("请输入正确的手机号码");
      } else {
        e.target.setCustomValidity("");
      }
    }

自定义校验写完了，后面我们看看阻止表单提交吧，毕竟正常情况下都是自己去写ajax的，不会用表单的默认提交，有时候也会有别的步骤要做。

三、阻止表单提交

    <form action="/test_api/users/login" method="post">
      <input type="number" 
            placeholder="请输入电话号码" 
            v-model="phone" 
            required />
      <input type="password" 
            placeholder="请输入密码" 
            v-model="password" 
            required />
      <button class="login_button" type="submit">登录</button>
    </form>

在表单代码里面，button 的type设为submit，点击按钮后就会自动触发表单提交，要阻止只要给表单加个属性就行。

<form action="/test_api/users/login" @submit="login" method="post">

没错，只需要指定submit响应的函数
然后在login函数里面加上e.preventDefault();这句代码
login(e)里面的参数(e)千万不能漏了

    login(e){
        e.preventDefault();
        // 你可以在这里为所欲为了、
    }

当然，在这里你同样可以console.log(e)来看看e是个啥，我也是初学者，感觉多打印这些东西看看还是挺好的。

补充

1、我也是今天学习form然后写出来帮自己梳理一下，也希望能够给比我还小白的小白一点帮助，加油吧我们都会变强的，但千万不要秃啊~！
2、哦，还有一篇文章也是我在学习的，蛮好的
传送门又又又来了
3、又想到一点，就是为什么要监听input 的input事件，而不是blur或者change事件，我开始是监听change事件的。但是出现了一个问题：change事件需要修改值并且点击input输入框外面才会触发，然而提示消息在校验成功前是不会消失的。
那么麻烦来了，如下图，即使输入正确的电话号码格式，但是不点击输入框外面根本不能触发change事件，不能setCustomValidity(’’)啊！这样用户真的会很莫名其妙吧~所以才改成了监听input事件，只要输入了就会触发监听，当格式正确，提示就会消失。（号码是我乱输入的啊，千万别骚扰人家。。。）