REAPI/app/setting/view/mobile_mnp/form.html

<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
    <div class="layui-card-body padding-left-40">

    	<div class="layui-row layui-col-space15">
            <div class="layui-col-xs12">
                <label class="block relative">
                    <span class="color-black font-w7">是否携转</span>
                    <span class="color-desc margin-left-5">Is MNP</span>
                    <select class="layui-select" name="is_mnp" id="is_mnp" lay-search>
                        {foreach [1 => '已携转', 0 => '未携转'] as $k => $v}
                        {if isset($vo.is_mnp) and $vo.is_mnp eq $k}
                        <option selected value="{$k}">{$v|default=''}</option>
                        {else}
                        <option  value="{$k}">{$v|default=''}</option>
                        {/if}
                        {/foreach}
                    </select>
                    <span class="help-block"><b>必填，</b>请选择是否携转,可以用手机号检测检测数据</span>
                </label>
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            
            <div class="layui-col-xs12">
                <label class="relative block">
                    <span class="font-w7">手机号</span><span class="color-desc margin-left-5">Mobile</span>
                    <input name="mobile" value='{$vo.mobile|default=""}'  required placeholder="请输入手机号" lay-verify="required|phone" class="layui-input" id="validate-phone">
                    <span class="color-desc">请输入手机号</span>

                </label>
                <div class="layui-form-mid" style="padding: 0!important;">
                    <button type="button" class="layui-btn layui-btn-primary"  id="get-mobile-mnp">获取携转状态</button>
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12">
                <label class="block relative">
                    <span class="color-black font-w7">原运营商</span>
                    <span class="color-desc margin-left-5">Old ISP</span>
                    <select class="layui-select" name="old_isp" id="old_isp" lay-search>
                        {foreach [1 => '移动', 2 => '联通', 3 => '电信'] as $k => $v}
                        {if isset($vo.old_isp) and $vo.old_isp eq $k}
                        <option selected value="{$k}">{$v|default=''}</option>
                        {else}
                        <option  value="{$k}">{$v|default=''}</option>
                        {/if}
                        {/foreach}
                    </select>
                    <span class="help-block"><b>必填，</b>请选择原运营商</span>
                </label>
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12">
                <label class="block relative">
                    <span class="color-black font-w7">现运营商</span>
                    <span class="color-desc margin-left-5">New ISP</span>
                    <select class="layui-select" name="new_isp" id="new_isp" lay-search>
                        {foreach [1 => '移动', 2 => '联通', 3 => '电信'] as $k => $v}
                        {if isset($vo.new_isp) and $vo.new_isp eq $k}
                        <option selected value="{$k}">{$v|default=''}</option>
                        {else}
                        <option  value="{$k}">{$v|default=''}</option>
                        {/if}
                        {/foreach}
                    </select>
                    <span class="help-block"><b>必填，</b>请选择现运营商</span>
                </label>
            </div>
        </div>

        
        <div class="hr-line-dashed margin-top-10 margin-bottom-10"></div>
        <label class="layui-form-item block relative">
            <span class="">备注</span><span class="color-desc margin-left-5">Description</span>
            <textarea placeholder="请输入备注" class="layui-textarea" name="desc">{$vo.desc|default=""}</textarea>
        </label>

        <div class="hr-line-dashed"></div>
        {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
        <div class="layui-form-item text-center">
            <button class="layui-btn" type='submit'>保存数据</button>
            <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
        </div>
    </div>
</form>

</script>
<script>
layui.use(['form','layer'], function(){
  var form = layui.form;
  var layer = layui.layer;
    // 点击获取验证码
    $('#get-mobile-mnp').on('click', function(){
        var isValid = form.validate('#validate-phone');  // 主动触发验证，v2.7.0 新增
        // 验证通过
        if(isValid) {
            layer.msg('手机号规则验证通过,正在获取携转状态');
            // 此处可继续书写「发送验证码」等后续逻辑
            // …
        }
        })




    form.render();
   
});


function validateMobile(input) {
    const mobilePattern = /^1[3-9]\d{9}$/; // 假设手机号码格式为中国的手机号码格式
    if (!mobilePattern.test(input.value)) {
        input.setCustomValidity("请输入有效的手机号码");
    } else {
        input.setCustomValidity("");
    }
}

function validateForm() {
    var mobileInput = document.querySelector('input[name="mobile"]');
    validateMobile(mobileInput);
    if (!mobileInput.checkValidity()) {
        mobileInput.reportValidity();
        return false;
    }
    return true;
}


    
</script>