1、案例要求：

要求制作考生登录页面index和考试信息填报页面detail。

2、实现过程

2.1、代码展示

index：

• wxml

<!--pages/kj/demo111-template/index.wxml-->

<image class="title_im_style" src="{{title_image}}" mode="acceptFill"></image>
<view class="box">
  <view class="title">考场场次选择</view>
  <view class="hr"></view>

  <form bindsubmit="form_submit">

    <view class="all_common">
      <text class="dianZiYouXiang">电子邮箱：</text>
      <input name="youXiang" type="text" class="input_common youXiang" value="{{getYouXiang}}" bindchange="inputEmail" />
    </view>

    <view class="all_common">
      <text class="shuRuMiMa">输入密码：</text>
      <input name="shuRuMiMa" type="password" class="input_common" value="{{getPassWard}}" />
    </view>

    <view class="all_common">
      <text class="quRenMiMa">确认密码：</text>
      <input name="queRenMiMa" type="password" class="input_common" value="{{getPassWard_again}}" />
    </view>

    <button class="button_dengLu" type="primary" form-type="submit">登录</button>
    <view class="baoCuo">
      <view>
        <text hidden="{{msg1_hidden}}">{{showMsg01}}</text>
      </view>
      <view>
        <text hidden="{{msg2_hidden}}">{{showMsg02}}</text>
      </view>
    </view>
  </form>

</view>

• wxss

/* pages/kj/demo111-template/index.wxss */
page{
    background-color: white;
}
.title_im_style{
    width: 100%;
    height: 150px;
}
.hr{
    height: 2px;
    background-color: rgb(252, 211, 27);
    margin: 5px 0px;
}
.all_common{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
}
.input_common{
    border-bottom: 2px solid blue;
    margin: 10px 0px;
}
.youXiang:hover{
    border-bottom: 2px solid rgb(236, 222, 18);
}
.button_dengLu{
    margin: 10px auto;
    width: 40%;
    height: 50px;
}
.baoCuo{
    background-color: yellow;
    color: red;
    text-align: center;
}

• js

// pages/kj/demo111-template/index.js
var title_image = "https://img.haomeiwen.com/i14216764/c6ae45f0fb33ebf7.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240";

var getYouXiang = "";
var getPassWard = "";
var getPassWard_again = "";

var msg1_hidden = true;
var msg2_hidden = true;

Page({
  data: {
    title_image : title_image,
    getYouXiang : getYouXiang,
    getPassWard : getPassWard,
    getPassWard_again : getPassWard_again,
    msg1_hidden : msg1_hidden,
    msg2_hidden : msg2_hidden,    
  },
  onLoad: function(options){
    
  },
  form_submit:function(e){
    if(e.detail.value.youXiang.length == 0 || e.detail.value.shuRuMiMa.length == 0){
      msg1_hidden = false;
      this.setData({
        msg1_hidden : msg1_hidden,
        showMsg01:"邮箱或密码不能为空"
      })
    }
    else if(e.detail.value.shuRuMiMa != e.detail.value.queRenMiMa){
      console.log(e.detail.value.shuRuMiMa);
      console.log(e.detail.value.queRenMiMa);
      msg2_hidden = false;
      this.setData({
        msg2_hidden : msg2_hidden,
        showMsg02:"两次输入密码不一致",
        getPassWard : "",
        getPassWard_again : ""
      })
    }
    else{
      wx.navigateTo({
        url: '../detail/detail',
      })
    }
  },
  inputEmail:function(e){
    var email = e.detail.value;
    var checkNum = this.checkEmail(email);
    
  },
  
  checkEmail:function(email){
    let str = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/ //正则表达式
    if(str.test(email)){
      return true
    }else{
      wx.showToast({
        title:"邮箱格式错误",
        icon:"loading"
      })
      this.setData({
        getYouXiang:""
      })
      return false
    }
  }



})

detail：

• wxml

<!--pages/detail/detail.wxml-->
<view class="box">
  <view class='title'>考试时段选择</view>
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="flex">
      <text>姓名：</text>
      <input type="text" auto-focus name="name" value="{{name}}"></input>
    </view>
    <view class="flex">
      <text>学号：</text>
      <input type="number" name="id" value="{{id}}"></input>
    </view>
    <picker bindchange="chooseTime" value="{{index}}" range="{{array}}" name="time">
      请选择考试时段：{{array[index]}}
    </picker>
    <view class="btnLayout">
      <button type='primary' form-type='submit'>确定</button>
      <button type='primary' form-type="reset">取消</button>
    </view>
  </form>
</view>

• wxss

/* pages/detail/detail.wxss */
page {
    /* 设置页面样式 */
    height: 100%;
    background: gainsboro;
  }
  
  .flex {
    /* 设置text组件和input组件的布局 */
    display: flex;
    margin: 5px 0;
    justify-content: flex-start; /* 设置水平方向左对齐 */
    align-items: center; /* 设置垂直方向居中对齐 */
  }
  
  input {
    /* 设置input组件样式 */
    width: 150px;
    height: 30px;
    border: 2px solid gray; /* 设置input组件边框样式 */
    margin: 5px;
  }
  
  input:hover {
    /* 设置输入时input组件边框样式 */
    border: 2px solid chocolate;
  }
  
  picker {
    /* 设置picker组件样式 */
    margin: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .btnLayout {
    /* 设置button组件布局 */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 50px 0;
    width: 100%;
  }
  
  button {
    /* 设置button组件样式 */
    width: 80px;
  }
  

• js

// pages/detail/detail.js
 
Page({
    data: {
      array: [
          '',
        '第一场15:00', 
        '第二场16:20', 
        '第三场17:40'
      ]
    },
  
    formSubmit: function (e) {
      var name = e.detail.value.name;  //获取姓名输入框内容
      var id = e.detail.value.id; //获取学号输入框内容
      var time=e.detail.value.time; //获取考试场次序号及时间
      wx.showModal({  //显示模态对话框
        title: '确认信息',
        content: e.detail.value.name + "同学，你的学号是："+id+"，你选择的场次是："+this.data.array[time]+",请确认信息！",
        success: function (res) {  //wx.showModal接口调用成功的回调函数
          if (res.confirm) {
            wx.showModal({
              title: '信息确认',
              content: '你的考场信息已经确认！',
            })
            wx.navigateTo({  //页面跳转
              url: '../index/index',
            })
          } else {
            console.log('用户点击取消')
          }
        }
      })
    },
    formReset:function(e){
        this.setData({
            index: 0
          })
    },
    chooseTime: function (e) {
      var index = e.detail.value  //获得picker组件选项下标
      this.setData({
        index: index
      })
    }
  }) 
  

2.2、结果展示

结果1.png 结果2.png

3、知识汇总

知识要点.png
正则表达式.png
正则表达式验证邮箱的方法1.png
正则表达式验证邮箱的方法2.png
模态对话框.png
模态对话框属性.png
回调函数success及其属性说明.png
navigateto函数.png
西安工程大学log.jpeg

4、踩坑说明

• 在表单组件中input组件的属性设置很重要：
  1、name：为了在bindsubmit触发函数中方便知道是哪个input组件传过来的值
  2、type：input组件中要输什么样的值
  3、value：用来更改input组件当中的值，一般是为了清空input组件的输入值，或者提供默认输入值时用的。
  4、切记，单表组件的input基本不需要设置绑定函数往js中传参。

<input name="youXiang" type="number" class="input_common" value="{{getYouXiang}}" />

• input组件中type的选择
  1、邮箱type：text
  2、密码type：password
• 选中某个input组件后需要在样式上作出调整的方法不是在input组件属性中添加，而是在wxss当中添加“类名”:hover（悬停选择器）

input:hover{
    border-bottom: 2px solid rgb(236, 222, 18);
}

• 模态对话框问题中还有个返回函数问题，需要注意返回函数的写法。
• picker选择器的组件属性设置

<picker bindchange="chooseTime" value="{{index}}" range="{{array}}" name="time">
      请选择考试时段：{{array[index]}}
</picker>