form表单提交电话号码非空和格式验证

处理逻辑:

为了确保用户输入的手机号码非空且格式正确,你可以使用JavaScript添加验证逻辑。手机号码通常为中国大陆手机号格式,即11位数字,以1开头,第二位是3-9之间的任意数字。

具体代码:

<form name="phoneForm" id="phoneForm" onsubmit="return validateForm()">
    <div class="tcui-cells tcui-cells_form">
        <div class="tcui-cell">
            <div class="tcui-cell__hd">
                <label class="tcui-label">手机号码</label>
            </div>
            <div class="tcui-cell__bd">
                <input class="tcui-input" type="tel" name="tel" id="tel" maxlength="11" value="{$__UserInfo['tel']}" placeholder="{lang tom_tongcheng:phone_tel_msg}">
            </div>
        </div>
    </div>

    <div class="phone-prompt">
        <div style="color: #00f;text-align:center">{lang tom_tongcheng:phone_prompt2}</div>
    </div>
    <section class="page_rgs">
        <section class="btn-group">
            <input type="hidden" name="formhash" value="{$formhash}">
            <input type="button" class="tcui-btn tcui-btn_primary id_phone_form_btn tc-template__bg" value="{lang tom_tongcheng:phone_btn}" onclick="submitForm()">
        </section>
    </section>
</form>

<script>
function validateForm() {
    var tel = document.getElementById('tel').value;
    var phonePattern = /^1[3-9]\d{9}$/; // 手机号码正则表达式

    if (tel === "") {
        alert("手机号码不能为空!");
        return false;
    } else if (!phonePattern.test(tel)) {
        alert("手机号码格式不正确!");
        return false;
    }
    return true;
}

function submitForm() {
    if (validateForm()) {
        document.getElementById('phoneForm').submit();
    }
}
</script>

onsubmit="return validateForm()": 当表单尝试提交时,调用 validateForm 函数进行验证。

提交按钮的 onclick 事件调用 submitForm 函数,而不是直接提交表单。这样可以在提交前进行验证。

posted @   黄文Rex  阅读(13)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示