微信小程序表单输入验证(手机号、邮箱验证、输入非空)

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个数字触发事件。
邮箱为失去焦点触发事件。
正则表达式/ /,格式注意

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 
}
}
})
  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值