微信邀请函小程序_小程序表单认证布局及验证详

小程序表单认证布局及验证详解       这篇文章主要为大家详细介绍了小程序表单认证布局及验证的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序表单认证布局及验证的具体代码，供大家参考，具体内容如下

tset.wxml

 view 
 view 
 view 姓名： /view 
 view 
 view 
 input placeholder='请输入真实姓名' bindinput='getNameValue' value='{{name}}' / 
 /view 
 /view 
 /view 
 view 
 view 手机号： /view 
 view 
 view 
 input placeholder='请输入手机号' bindinput='getPhoneValue' value='{{phone}}' / 
 /view 
 /view 
 /view 
 view 
 view 验证码： /view 
 view 
 view 
 input placeholder='请输入验证码' bindinput='getCodeValue' value='{[code]}' / 
 /view 
 view 
 button 验证码 /button 
 /view 
 /view 
 /view 
 !-- wx:if 和wx:else要紧紧在一起 -- 
 view wx:if='{{upimg}}' 
 image src='{{upimg}}' /image 
 /view 
 view wx:else 
 view catchtap='uploadimgurl' 
 view 
 image src="/static/images/index/upimg.png" /image 
 /view 
 view 
 text 点击上传营业执照 /text 
 /view 
 /view 
 /view 
 button bindtap='save' 提交认证资料 /button 
 /view 

test.wxss

page {
 width: 100%;
 height: 100%;
.content {
 width: 95%;
 height: 80rpx;
 margin: 0 auto;
 border-bottom: 1rpx solid gray;
 margin-top: 5%; 
.left {
 width: 20%;
 height: 80rpx;
 float: left;
 text-align: left;
 line-height: 80rpx;
 font-size: 30rpx;
.right {
 width: 80%;
 height: 80rpx;
 float: right;
 text-align: left;
 line-height: 80rpx;
.right-left input {
 float: left;
 text-align: left;
 height: 80rpx;
.right-right {
 width: 30%;
 float: right;
 height: 80rpx;
.btn {
 height: 80rpx;
 font-size: 28rpx;
border: 1rpx solid greenyellow;
.upimage {
 background-color: #f2f2f2;
 border: 1rpx solid #ccc;
 width: 80%;
 /* margin-top: 10%; */
 height: 300rpx;
 border-radius: 10rpx;
 margin: 50rpx auto;
.upimg {
 width: 100%;
 height: 300rpx;
.upimage-ti凡科抠图 {
 height: 80rpx;
 line-height: 80px;
 text-align: center;
 margin: 50rpx auto;
.upimage-ti凡科抠图 text {
 font-size: 30rpx;
 color: darkgray;
.add {
 width: 80rpx;
 height: 80rpx;
 align-items: center;
 /* position: fixed; */
 margin: 0 auto;
 line-height: 80px;
 text-align: center;
.changeBtn {
 width: 100%;
 align-items: center;
 background: #1eb31c;
 color: #fff;
 position: fixed;
 bottom: 0;
 line-height: 100rpx;
 left: 0;
}

验证必填信息不能为空

test.js

//logs.js
Page({
 * 页面的初始数据
 data: {
 name: '',//姓名
 phone: '',//手机号
 code: '',//验证码
 iscode: null,//用于存放验证码接口里获取到的code
 upimg: "",
 codename: "获取验证码",
 //获取input输入框的值
 getNameValue: function (e) {
 this.setData({
 name: e.detail.value
 getPhoneValue: function (e) {
 this.setData({
 phone: e.detail.value
 getCodeValue: function (e) {
 this.setData({
 code: e.detail.value
 getCode: function () {
 var a = this.data.phone;
 var _this = this;
 var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
 if (this.data.phone == "") {
 wx.showToast({
 title: '手机号不能为空',
 icon: 'none',
 duration: 1000
 return false;
 } else if (!myreg.test(this.data.phone)) {
 wx.showToast({
 title: '请输入正确的手机号',
 icon: 'none',
 duration: 1000
 return false;
 } else {
 wx.request({
 data: {},
 'url': 接口地址,
 success(res) {
 console.log(res.data.data)
 _this.setData({
 iscode: res.data.data
 var num = 61;
 var timer = setInterval(function () {
 num--;
 if (num = 0) {
 clearInterval(timer);
 _this.setData({
 codename: '重新发送',
 disabled: false
 } else {
 _this.setData({
 codename: num + "s"
 }, 1000)
 //获取验证码
 getVerificationCode() {
 this.getCode();
 var _this = this
 _this.setData({
 disabled: true
 //提交表单信息
 save: function () {
 var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
 if (this.data.name == "") {
 wx.showToast({
 title: '姓名不能为空',
 icon: 'none',
 duration: 1000
 return false;
 if (this.data.phone == "") {
 wx.showToast({
 title: '手机号不能为空',
 icon: 'none',
 duration: 1000
 return false;
 } else if (!myreg.test(this.data.phone)) {
 wx.showToast({
 title: '请输入正确的手机号',
 icon: 'none',
 duration: 1000
 return false;
 if (this.data.code == "") {
 wx.showToast({
 title: '验证码不能为空',
 icon: 'none',
 duration: 1000
 return false;
 } else if (this.data.code != this.data.iscode) {
 wx.showToast({
 title: '验证码错误',
 icon: 'none',
 duration: 1000
 return false;
 } else {
 wx.setStorageSync('name', this.data.name);
 wx.setStorageSync('phone', this.data.phone);
 wx.redirectTo({
 url: '../add/add',
 if (this.data.upimg == "") {
 wx.showToast({
 title: '营业执照不能为空',
 icon: 'none',
 duration: 1000
 return false;
 //上传照片
 uploadimgurl: function () {
 var that = this;
 var upimg = that.data.upimg;
 //选择照片
 wx.chooseImage({
 success(res) {
 var tempFilePaths = res.tempFilePaths
 that.setData({
 upimg: tempFilePaths,
 * 生命周期函数--监听页面加载
 onLoad: function (options) {
})

为大家推荐现在关注度比较高的微信小程序教程一篇：小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。