Django的搭建和小项目处理的过程（五）

上节回顾

如何验证信息

要学会自己搜索
一般直接百度搜索"小程序input 自带验证"
为了节省时间，老师推荐学习地址: 一个插件.
资源会放网盘
将下载的文件添加到
刷新之后微信小程序界面就会出现这个文件。

可以看到这个文件里面的很多信息如下所示：

添加代码
1：将插件引入到你所需要的页面的JS文件里，在我们的程序里，即add.js的第一行加入下列代码

//index.js页面下
import WxValidate from '../../utils/WxValidate.js'
const app = getApp()

add.wxml的代码如下：

<form catchsubmit="formSubmit" catchreset="formReset">


 <view class="page-section">
  <view class="page-section-title">学号：</view>
  <view class="weui-cells weui-cells_after-title">
   <view class="weui-cell weui-cell_input">
    <view class="weui-cell__bd" style="margin: 30rpx 0">
     <input class="weui-input" value="{{sno}}" name="sno" bindinput="snoInput" placeholder="请输入学号" />
    </view>
   </view>
  </view>
 </view>

 <view class="page-section">
  <view class="page-section-title">姓名：</view>
  <view class="weui-cells weui-cells_after-title">
   <view class="weui-cell weui-cell_input">
    <view class="weui-cell__bd" style="margin: 30rpx 0">
     <input class="weui-input" value="{{name}}" name="name" bindinput="nameInput" placeholder="请输入姓名" />
    </view>
   </view>
  </view>
 </view>

 <view class="page-section page-section-gap">
  <view class="page-section-title">性别</view>
  <radio-group  value="{{gender}}" name="gender" bindchange="selectSex">
   <label>
    <radio value="男"  checked="{{checked1}}"/>男</label>
   <label>
    <radio value="女" checked="{{checked2}}"/>女</label>
  </radio-group>
 </view>

<view class="section">

  <picker mode="date" value="{{birthday}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" name="birthday">
    <view class="picker">
      出生日期: {{birthday}}
    </view>
  </picker>
</view>

 <view class="page-section">
  <view class="page-section-title">手机：</view>
  <view class="weui-cells weui-cells_after-title">
   <view class="weui-cell weui-cell_input">
    <view class="weui-cell__bd" style="margin: 30rpx 0">
     <input class="weui-input" value="{{mobile}}" name="mobile" bindinput="mobileInput" placeholder="请输入手机" />
    </view>
   </view>
  </view>
 </view>

 <view class="page-section">
  <view class="page-section-title">邮箱：</view>
  <view class="weui-cells weui-cells_after-title">
   <view class="weui-cell weui-cell_input">
    <view class="weui-cell__bd" style="margin: 30rpx 0">
     <input class="weui-input" value="{{email}}" name="email" bindinput="emailInput" placeholder="请输入电子邮件" />
    </view>
   </view>
  </view>
 </view>


 <view class="page-section">
  <view class="page-section-title">地址：</view>
  <view class="weui-cells weui-cells_after-title">
   <view class="weui-cell weui-cell_input">
    <view class="weui-cell__bd" style="margin: 30rpx 0">
     <input class="weui-input" value="{{address}}" name="address" bindinput="addressInput" placeholder="请输入地址" />
    </view>
   </view>
  </view>
 </view>

 <view class="btn-area">
  <button style="margin: 30rpx 0" type="primary" formType="submit">提交</button>
  <button style="margin: 30rpx 0" formType="reset">重置</button>
 </view>
</form>

<view class="table">
  <view class="tr bg-w">
    <view class="th">学号</view>
    <view class="th">姓名</view>
    <view class="th ">性别</view>
    <view class="th ">手机</view>
  </view>
  <block wx:for="{{listStudent}}" wx:key="sno">
    <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
      <view class="td">{{item.sno}}</view>
      <view class="td">{{item.name}}</view>
      <view class="td">{{item.gender}}</view>
      <view class="td">{{item.mobile}}</view>
    </view>
    <view class="tr" wx:else>
      <view class="td">{{item.sno}}</view>
      <view class="td">{{item.name}}</view>
      <view class="td">{{item.gender}}</view>
      <view class="td">{{item.mobile}}</view>
    </view>
  </block>
</view>

add.js中在七个函数属性填值选项！ 之后 ！到！代码结束！的代码如下

// pages/add/add.js

add:function(e){
wx.request({
  url: 'http://127.0.0.1:8000/students/add/', //仅为示例，并非真实的接口地址
  method:'POST',
  data:{
      "sno":this.data.sno,
      "name":this.data.name,
      "birthday":this.data.birthday,
      "gender":this.data.gender,
      "address":this.data.address,
      "email":this.data.email,
      "mobile":this.data.mobile,
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success :(res)=> {
    //console.log(res.data.data)   在console控制台输出结果
    if(res.data.code==1)
       { this.setData({
          listStudent:res.data.data,
        })
        this.setData({
          "sno":'',
          "name":'',
          "birthday":'',
          "gender":'',
          "address":'',
          "email":'',
          "mobile":'',
          checked1:false,
          checked2:false,
        })
      }else{
    wx.showToast({
      title: '学号，姓名，日期不能为空',
      icon:'none',
      duration:2000
     })
    }
  }
})
},
//报错 
showModal(error) {
  wx.showModal({
    content: error.msg,
    showCancel: false,
  })
},
//验证函数
initValidate() {
  const rules = {
    sno:{
      required:true
    },
    name:{
      required:true
    },
    birthday:{
      required:true,
      date:true
    },
    mobile: {
      required: false,
      tel: true
    },
    email: {
      required: false,
      email: true
    }
  }
  const messages = {
    sno:{
      required:'学号为必填内容'
    },
    name:{
      required:'姓名不能为空'
    },
    birthday:{
      required: '出生日期不能为空'
    },
    mobile: {
      required: '请填写手机号',
      tel: '请输入正确的手机号'
    },
    email: {
      required: '请填写邮件',
      email: '请填写正确的电子邮件'
    }
  }
  this.WxValidate = new WxValidate(rules, messages)
},
//调用验证函数
formSubmit: function (e) {
  console.log('form发生了submit事件，携带的数据为：', e.detail.value)
  const params = e.detail.value
  //校验表单
  if (!this.WxValidate.checkForm(params)) {
    const error = this.WxValidate.errorList[0]
    this.showModal(error)
    return false
  }
  this.showModal({
    msg: '提交成功'
  })
  this.add()
},
onLoad:function(options){
this.initValidate()
},
onready :function(){
  wx.request({
  url: 'http://127.0.0.1:8000/students/', //接口地址，表示点击之后的页面的内容的来源
  method:'GET',    //平时也默认为get，不同的动作，写的不一样
  header: {
    'content-type': 'application/json' // 默认值
  },
  success :(res)=> {
    console.log(res.data.data)
    if(res.data.code==1)
       { this.setData({
          listStudent:res.data.data,                  //给该页面的DATA赋值，用：来赋值
        })
      }else{
    wx.showLoading({
      title: '出错了',
    })
  }
  }
})
}
})

至此，验证信息的功能成功！

如何重置清空

我们从微信官方文档里面下载的格式表里面可以看到有重置键

在（四）里面我们说过有的（比如生日）不能全部清空
解决方法是

其他的属性里面也进行类似的修改，比如（还有更多不一一举例）