【微信小程序】表单验证：结合服务端API，实现小程序注册及登录等功能

前言：

此篇博客主要分享：微信小程序是怎样与后端服务器联通，通过服务端API，表单输入信息之后可以提交给服务器。并且加以用户的各种数据进行合法验证的功能。
说明：本服务器代码用的是PHP服务器及MySQL数据库。

一、用户注册

// pages/register/register.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    date:"2010-09-26",
    items:[{name:"篮球",value:"篮球"},
    {name:"足球",value:"足球"},
    {name:"羽毛球",value:"羽毛球"},
    {name:"乒乓球",value:"乒乓球"},
    {name:"唱歌",value:"唱歌"},
    {name:"跳舞",value:"跳舞"},
    {name:"看电影",value:"看电影"},
    {name:"看书",value:"看书"},
    {name:"美食",value:"美食"},
  ],
  classArray:["BSA01(周一3-4)","BSA02(周四9-10)"],
  index:0
  },

  formSubmit:function(e){
    console.log(e.detail.value);

    if(e.detail.value.password != e.detail.value.password2){
      wx.showToast({
        title: '两次密码不一致'
      });
      return;
    }
    var reg = /^1[3|4|5|7|8][0-9]{9}$/;
    var phone = e.detail.value.phone;
    var flag = reg.test(phone);

    if(!flag){
      wx.showToast({
        title:"请输入正确的手机号码",
        image:''
      });
      return;
    }

    wx.request({
      url:'https://*********',//自行根据自己的服务器url进行设定
      data:{
        'userid':e.detail.value.userid,
        'username':e.detail.value.username,
        'password':e.detail.value.password,
        'sex':e.detail.value.sex,
        'phone':e.detail.value.phone,
        'littleclass':e.detail.value.littleclass,
        'birthday':e.detail.value.birthday,
        'interest':e.detail.value.interest,
        'suggest':e.detail.value.suggest
      },
      method:"POST",
      header:{
        'content-type':'application/x-www-form-urlencoded'
      },
      success:function(res){
        console.log("返回值：");
        if(res.data.state==1){
          wx.showToast({
            title:res.data.info,
            icon:'success'
          });
        }else{
          wx.showToast({
            title:res.data.info,
            icon:'../../images/warn'
          });
        }
      }
    })
  },

  formReset:function(){
    console.log('点击了重置按钮')
  },

  pickerchange:function(e){
    this.setData({
      date:e.detail.value
    })
  },

  pickerClassChange:function(e){
    this.setData({
      index:e.detail.value
    })
  }
})

<!--pages/register/register.wxml-->
<form bindsubmit="formSubmit" bindreset="formReset">
	<view class="item">
		<text class="item-title">学号：</text>
		<input
		 type="number"
		 name="userid"
		 placeholder="请输入学号"
		 confirm-type="done"
		/>
	</view>

	<view class="item">
		<text class="item-title">姓名：</text>
		<input
		 type="number"
		 name="username"
		 placeholder="请输入姓名"
		 confirm-type="done"
		/>
	</view>

	<view class="item">
		<text class="item-title">密码：</text>
		<input
		 password="true"
		 type="number"
		 name="password"
		 placeholder="请输入密码"
		 maxlength="12"
		/>
	</view>

	<view class="item">
		<text class="item-title">确认密码：</text>
		<input
		 password="true"
		 type="number"
		 name="password2"
		 placeholder="请重复输入密码"
		 maxlength="12"
		/>
	</view>

	<view class="item">
		<text class="item-title">电话：</text>
		<input
		 type="number"
		 name="phone"
		 placeholder="请输入电话号码"
		/>
	</view>

	<view class="item">
		<text class="item-title">性别：</text>
		<radio-group name="sex">
			<label>
				<radio value="女" checked="true">女</radio>
			</label>

			<label>
				<radio value="男">男</radio>
			</label>
		</radio-group>
	</view>

	<view class="item">
		<text class="item-title">教学小班：</text>
		<picker
		 name="littleClass"
		 mode="selector"
		 range="{{classArray}}"
		 value="{{classArray[index]}}"
		 bindchange="pickerClassChange"
		>
			<text>{{classArray[index]}}</text>
		</picker>
	</view>

	<view class="item">
		<text class="item-title">生日：</text>
		<picker
		 name="birthday"
		 mode="date"
		 range="{{date}}"
		 start="1980-09-26"
		 end="2017-10-10"
		 bindchange="pickerchange"
		>
			<text>{{date}}</text>
		</picker>
	</view>

	<view class="item">
		<text class="item-title">爱好：</text>
		<checkbox-group class="interest" name="interest">
			<view wx:for="{{items}}">
				<label>
					<checkbox value="{{item.value}}" />
					{{item.name}}
				</label>
			</view>
		</checkbox-group>
	</view>

	<view class="item">
		<text class="item-title">对本门课程的建议：</text>
		<textarea class="area" name="suggest"></textarea>
	</view>

	<view class="btn-form">
		<button
		 class="btnsumbit"
		 size="mini"
		 type="primary"
		 form-type="submit"
		>
			提交
		</button>
		<button
		 class="btnreset"
		 size="mini"
		 type="primary"
		 form-type="reset"
		>
			重置
		</button>
	</view>
</form>

二、用户登录验证

判断用户所输入的用户名存不存在，若不存在则引导用户去注册

<!--pages/load/load.wxml-->
<form bindsubmit="formSumbit">
	<view class="item">
		<text class="item-title">用户名：</text>
		<input
		 type="number"
		 name="userid"
		 placeholder="请输入用户名"
		 bindblur="usernameInput"
		/>
	</view>

	<view class="item">
		<text class="item-title">密码：</text>
		<input
		 type="number"
		 name="password"
		 placeholder="请输入密码"
		 password="true"
		 bindinput="userPasswordInput"
		/>
	</view>
	<button
	 plain="{{true}}"
	 size="mini"
	 form-type="submit"
	>登录
	</button>
	<button
	 plain="{{true}}"
	 size="mini"
	 bind:tap="handleRegister"
	>注册
	</button>
</form>

// pages/load/load.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
 
  //获取到用户在input输入的值
  usernameInput:function(e){
    console.log(e)
    wx.request({
      //登录页服务器地址 
      url:'https://**************',
      data:{
        //将用户输入的数据赋予到userid
        //这里的userid和password也是登录页服务器地址后面的参数
        'userid':e.detail.value
      },
      method:"POST",
      header:{
        'content-type':'application/x-www-form-urlencoded'
      },
      success:function(res){
        console.log(res.data);
        if(res.data.state==2){
          wx.showToast({
            title:'用户名不存在',
            image:'../../images/warn.png'
          });
        }
      }
      
    })
  },

  userPasswordInput:function(e){
    console.log(e)
  },

  formSumbit:function(e){
    console.log(e)
    wx.request({
      //登录页服务器地址 
      url:'https://**************',
      data:{
        //将用户输入的数据赋予到userid,password
        //这里的userid和password也是登录页服务器地址后面的参数
        'userid':e.detail.value.userid,
        'password':e.detail.value.password,
      },
      method:"POST",
      header:{
        'content-type':'application/x-www-form-urlencoded'
      },
      success:function(res){
        console.log(res);
        if(res.data.state==1){
          wx.navigateTo({
            url:"/pages/movies/movies", 
          })
        }else{
          wx.showToast({
            title:res.data.info,
            image:'../../images/warn.png'
          });
        }
      }
      
    })
  },

  handleRegister:function(){
    wx.navigateTo({
      url:"/pages/register/register", 
    })
  }
})

1.这里运用了input的bindblur属性，当光标离开输入框时会触发wx.showToast

2.用户名正确之后，用户输入密码进行验证

用户名正确，但密码不正确则显示登录失败
核心代码：

如果此篇博客能帮得到你，欢迎大家关注，点赞，评论，收藏，转发呀~

如有不足也请在评论区提出批评指正！多多指教！