微信小程序 表单验证 源码

效果图

点击预约设计弹出表单

 

城市，面积不能输入，只能选择

 

点击位置获取当前定位

 

源码:

Wxml

<!--pages/designerList/designerDetail.wxml-->
<view>

  <view class='tc m_t20'>
    <image src='{
  {urlhttp + designerDetail.thumb}}' class='imglogo'></image>
    <text class='font18 fontw7 block m_t5'>{
  {designerDetail.name}}</text>
    <text class='inline_block c_theme font12' style='background:#ffd3b0;padding:4rpx 16rpx;'>{
  {designerDetail.honour}}</text>
    <view class='font14'>
      <view class='inline_block bd_all m_t10' style='border-color:#ff6000;padding:8rpx 30rpx;border-radius:70rpx;overflow:hidden'>
        <text class='gray6'>设计费用：</text>
        <text class='c_theme'>{
  {designerDetail.attr_3}}</text>
      </view>      
    </view>
  </view>
  <view class='p_all15'>
    <view class='radius5' style='box-shadow:#ccc 0px 1px 5px;overflow:hidden'>
      <text class='block white p_tb10 tc font15 bg_gray6'>简介</text>
      <view class='font15 gray6 lineH_m p_all10'>
        <text class='block' wx:if="{
  {designerDetail.attr_2 !== ''}}">-作品：{
  {designerDetail.attr_2}}</text>
        <text class='block' wx:if="{
  {designerDetail.attr_1 !== ''}}">-擅长：{
  {designerDetail.attr_1}}</text>
        <text class='block' wx:if="{
  {designerDetail.attr_4 !== ''}}">-毕业院校：{
  {designerDetail.attr_4}}</text>
        <text class='block' wx:if="{
  {designerDetail.attr_5 !== ''}}">-从业年限：{
  {designerDetail.attr_5}}</text>
        <text class='block' wx:if="{
  {designerDetail.attr_6 !== ''}}">-设计理念：{
  {designerDetail.attr_6}}</text>
      </view>
    </view>
  </view>
  <!-- 案例图片 -->
  <view class='p_tb10 p_lr15 font16 gray3'>案例作品</view>
  <view class='p_lr15 p_b20'>
    <view class='m_t10' wx:for="{
  {designerDetail.pics}}" bindtap='bindpreviewImage' id='{
  {index}}'>
      <image src='{
  {urlhttp + item}}' mode='widthFix' style='width:100%;border-radius:40rpx;'></image>
    </view>
  </view>
  
  
  <!-- 预约按钮 -->
  <view style='height:100rpx;'></view>
  <view class='pf footbtn flex'>
    <view style='width:50%;border-color:white' class='bd_r white font18 tc bg_theme' data-type='预约设计' bindtap='orderTap'>预约设计</view>
    <view style='width:50%;' class='white font18 tc bg_theme' data-type='预约量房' bindtap='orderTap'>预约量房</view>
  </view>

  <!-- 预约表单 -->
  <view class='tip-content-dialog' hidden='{
  {dialogHidden}}'>
    <view class='tip-dialog-view p_all20 bg_white' style='width:90%;border-radius40rpx;overflow:hidden;'>
      <text class='font15 gray9 inline_block p_b10 p_lr10' bindtap='closeTap'>取消</text>
      <form bindsubmit="formSubmit">
        <view class='p_all10'>
          <view class='formView'>
            <view class='inputs bg_graye gray6 font15 p_tb10 p_lr10'>
              <picker bindchange="bindPickerzone" value="{
  {index2}}" range="{
  {userZoneList}}">
                <label class='fl m_t5'>所在城市</label>
                <text class='fr m_t5'>﹀</text>
                <input class='tr fr' type='text' disabled='disabled' value='{
  {userZoneList[index2]}}'></input>
                <view class='cl'></view>
              </picker>
            </view>
            <view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10' bindtap='getLocation'>
              <label class='fl m_t5'>工程位置</label>
              <text class='fr m_t5'>﹀</text>
              <input class='tr fr' type='text' disabled='disabled' value='{
  {userlocation}}'></input>
              <view class='cl'></view>
            </view>
            <view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10'>
              <picker bindchange="bindPickerChange" value="{
  {index}}" range="{
  {acreagelist}}">
                <label class='fl m_t5'>房屋面积</label>
                <text class='fr m_t5'>﹀</text>
                <input class='tr fr' type='text' disabled='disabled' value='{
  {acreagelist[index]}}'></input>
                <view class='cl'></view>
              </picker>
            </view>
            <view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10'>
              <label class='fl m_t5'>真实姓名</label>
              <input class='tr fr' type='text' value='' name='name' placeholder='输入真实姓名'></input>
              <view class='cl'></view>