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

  • 相关阅读:
    动态生成 Excel 文件供浏览器下载的注意事项
    JavaEE 中无用技术之 JNDI
    CSDN 泄露用户密码给我们什么启示
    刚发布新的 web 单点登录系统,欢迎下载试用,欢迎提建议
    jQuery jqgrid 对含特殊字符 json 数据的 Java 处理方法
    一个 SQL 同时验证帐号是否存在、密码是否正确
    PostgreSQL 数据库在 Windows Server 2008 上安装注意事项
    快速点评 Spring Struts Hibernate
    Apache NIO 框架 Mina 使用中出现 too many open files 问题的解决办法
    解决 jQuery 版本升级过程中出现 toLowerCase 错误 更改 doctype
  • 原文地址:https://www.cnblogs.com/behindman/p/9818055.html
Copyright © 2011-2022 走看看