zoukankan      html  css  js  c++  java
  • 微信小程序 --- 表单输入验证(手机号、邮箱验证、输入非空)

    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 = /^1d{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
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    Python Try Except
    Python 爬虫常用模块
    numpy中的数学
    机器学习名词
    numpy 矩阵变换transpose和swapaxes
    【Spark-core学习之四】 Spark任务提交
    【Spark-core学习之三】 Spark集群搭建 & spark-shell & Master HA
    【Spark-core学习之二】 RDD和算子
    【Spark-core学习之一】 Spark初识
    【Scala学习之二】 Scala 集合 Trait Actor
  • 原文地址:https://www.cnblogs.com/behindman/p/9818055.html
Copyright © 2011-2022 走看看