微信小程序 --- 表單輸入驗證（手機號、郵箱驗證、輸入非空）

js代碼

    Page({
     
     
     
    /**
    * 頁面的初始數據
    */
     
    data: {
     
    indicatorDots: false,
     
    autoplay: false,
     
    interval: 5000,
     
    duration: 1000,
     
    proList: null,
     
    name:"",
     
    phone:"",
     
    email:"",
     
    company:"",
     
    job:"",
     
    vip:""
     
    },
     
    // 斷定輸入爲非空字符
     
    formSubmit: function (e) {
     
    var name = e.detail.value.name;
     
    var phone = e.detail.value.phone;
     
    // mobile
     
    var email = e.detail.value.email;
     
    var company = e.detail.value.mobile;
     
    var job = e.detail.value.job;
     
    var vip = e.detail.value.vip;
     
    if (name==""||phone==""||email==""||company==""||job==""||vip==""){
     
    wx.showModal({
     
    title: '提示',
     
    content: '請輸入完整信息！',
     
    success: function (res) {
     
    if (res.confirm) {
     
    console.log('用戶點擊肯定')
     
    }
     
    }
     
    })
     
    } else{
     
    console.log(e.detail.value)
     
    // detail
     
    }
     
    },
     
    loginBtnClick: function () {
     
    if (this.data.name.length == 0 || this.data.phone.length == 0) {
     
    this.setData({
     
    infoMess: '舒適提示：用戶名和密碼不能爲空！',
     
    })
     
    } else {
     
    this.setData({
     
    infoMess: '',
     
    name: '用戶名：' + this.data.userN,
     
    phone: '密碼：' + this.data.passW
     
    })
     
    }
     
    },
     
     
     
    // 手機號部分
     
    inputPhoneNum: function (e) {
     
    let phoneNumber = e.detail.value
     
    if (phoneNumber.length === 11) {
     
    let checkedNum = this.checkPhoneNum(phoneNumber)
     
    }
     
    },
     
    checkPhoneNum: function (phoneNumber) {
     
    let str = /^1\d{10}$/
     
    if (str.test(phoneNumber)) {
     
    return true
     
    } else {
     
    wx.showToast({
     
    title: '手機號不正確',
     
    image: './../../../../images/fail.png'
     
    })
     
    return false
     
    }
     
    },
     
    // 郵箱驗證部分
     
    inputemail: function (e) {
     
    let email = e.detail.value
     
    let checkedNum = 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: '請填寫正確的郵箱號',
     
    image: './../../../../images/fail.png'
     
    })
     
    return false
     
    }
     
    }
     
    })

 

wxml代碼：

    <form bindsubmit='formSubmit'>
     
        <view class='form'>
     
        <text class='label'>姓名<text class='red'>(必填)</text></text>
     
        <input class='int' name="name"></input>
     
        <text class='label'>手機<text class='red'>(必填)</text></text>
     
        <input class='int'name="phone" type="number" maxlength="11" bindinput="inputPhoneNum"></input>
     
        <text class='label'>郵箱<text class='red'>(必填)</text></text>
     
         <input class='int' name="email" bindchange="inputemail" ></input>
     
         <text class='label' >單位<text class='red'>(必填)</text></text>
     
         <input class='int' name="company" ></input>
     
         <text class='label' >職務<text class='red'>(必填)</text></text>
     
             <input class='int' name="job"></input>
     
        </view>
     
        <button class='submit' formType="submit" type="primary" >提交</button>
     
    </form>

註解：

手機號爲輸入11個數字觸發事件。

郵箱爲失去焦點觸發事件。

正則表達式/  /，格式注意。
---------------------
做者：Thea12138
來源：CSDN
原文：https://blog.csdn.net/Thea12138/article/details/80507133
版權聲明：本文爲博主原創文章，轉載請附上博文連接！