手机号码和短信文本检查

Question

首先，我不太擅长PHP和学习它，请帮助。

我想制作一个只接受手机号码和短信的页面，并在以下检查后将其发送到“process.php”以进行下一步处理。

A1- 移动字段仅包含数字（没有字母、没有“+ 或 -”、没有“逗号”）。如果字段包含任何非数字，则提示“仅允许数字值”，删除包含的移动字段并再次关注它。

A2- 移动字段只允许 10 位数字（不小于等于 10 或不大于等于 10）。如果字段包含少于或多于 10 位数字，则提示“仅允许 10 位数字”，删除包含的移动字段并再次关注它。

A3- 移动字段的数字以 7、8 或 9 开头（不允许 0 到 6 等其他起始数字）。如果starting包含0到6，提示“Only 7, 8 or 9 at start allowed”，删除移动字段contain并再次关注。

A4- 如果手机字段保持空白，提示“请输入手机号码”。

B1- 文本字段仅检查 160 个字符（允许少于 160 个，但不允许超过 160 个）并在文本字段下方显示实时“字符剩余”字段。

B2- 如果文本字段保持空白，则提示“请输入文本信息”。

如果所有'A'-部分（用于移动字段）和'B'-部分（用于文本消息字段）有效性检查完成，则移动字段和文本消息字段将其数据发送到'process.php'以进行下一步处理一步。

我已经为此工作了很长时间，但仍然需要做更多的事情并妥善安排它。请需要帮助并提前谢谢您

<script language="javascript" type="text/javascript">
// <![CDATA[
function checkNum(x) {
    if (!(/^\d+\d{9}$/.test(x.value))) {
        alert("Only 10 Digits Numeric Values Allowed");
        x.focus();
        return false;
    }
    return true;
}
// ]]>
</script>
<script type = "text/javascript" >
// <![CDATA[
$(window).load(function () {
    $("#tm_field").keyup(function () {
        el = $(this);
        if (el.val().length >= 160) {
            el.val(el.val().substr(0, 160));
        } else {
            $("#charNum").text(160 - el.val().length);
        }
    });
});
// ]]>
</script>
</p>
<p>
    <title>Test Page</title>
</p>
<p><strong>This Free SMS page is still under construction,</strong></p>
<p><strong>M working on it &amp; it will start soon ................</strong></p>
<form action="process.php" method="post">
    <table border="1" align="center">
        <tbody>
            <tr>
                <td><span data-mce-mark="1"><span color="red" style="color: red;" data-mce-mark="1">*</span> Mobile Number </span></td>
                <td>
                    <p><input type="text" name="NUM" id="mn_field" onchange="checkNum(this)" /></p>
                    <p><small> Please enter 10 digits mobile number, only.</small></p>
                </td>
            </tr>
            <tr>
                <td><span data-mce-mark="1"><span color="red" style="color: red;" data-mce-mark="1">*</span> Text Message </span></td>
                <td align="center"><textarea id="tm_field" rows="7" cols="25"></textarea></td>
            </tr>
            <tr>
                <td colspan="1" align="center">Character remain(s)</td>
                <td id="charNum">160</td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="Bye Bye SMS" /></td>
            </tr>
            <tr>
                <td colspan="2" bgcolor="#ffffcc" align="center"><small><span style="text-decoration: underline;" data-mce-mark="1">N.B.</span><strong> </strong>:- A " <span color="red" style="color: red;" data-mce-mark="1">*</span> " indicates a field is required</small></td>
            </tr>
        </tbody>
    </table>
</form>

Answer 1

根据您的要求，我会这样编写号码验证函数（A）：

    var checkMobileNumber = function checkMobileNumber(number) {
            var nonNumeric = /\D+/g,
                indianMobileNumber = /^[7-9]\d{9}$/g,
                allNumeric = false,
                match = false,
                isValid = false,
                message = '',
                error = {
                    "": null,
                    "required": "A mobile number is required.",
                    "invalid": "The mobile number you have entered must start with 7, 8, or 9.",
                    "wrong length": "The mobile number must consist of exactly 10 digits.",
                    "non-numeric": "The mobile number can only consist of numeric values."
                };
        if (number.length !== 10) {
            if (number.length === 0) {
                message = 'required';
            } else {
                message = 'wrong length';
            }
        } else {
            allNumeric = !nonNumeric.test(number);
            match = indianMobileNumber.test(number);
            isValid = allNumeric && match;
            if (!isValid) {
                if (!allNumeric) {
                    message = 'non-numeric';
                } else {
                    message = 'invalid';
                }
            }
        }
        // returning an object containing the overall validity and the error message
        return {
            "isValid": isValid,
            "errorMessage": error[message]
        };
    };

并像这样在form.submit上集成消息验证功能：

    $('form').on('submit', function (e) {
        var errSum = $('.error.summary').empty(),
            num = $('#mobileNumber'),
            sms = $('#smsMessage'),
            smsIsValid = sms.val().trim().length > 0,
            test = checkMobileNumber(num.val()),
            p = $('<p />');
        if (!smsIsValid || !test.isValid) {
            e.preventDefault();
        }
        if (!test.isValid) {
            errSum.append(p.clone().text(test.errorMessage));
            num.get(0).focus();
        }
        if (!smsIsValid) {
            errSum.append(p.clone().text('Please enter a message to send.'))
            if (test.isValid) { // no sense in taking focus away if the mobile number is bad.
                sms.get(0).focus();
            }
        }
        num.siblings('.error').toggleClass('active', test.isValid);
        sms.siblings('.error').toggleClass('active', sms.isValid);
        // normal correct return is below.
        return test.isValid && smsIsValid;
    });

工作演示：http://jsfiddle.net/rawvm/

您可能会注意到，工作演示通过将错误消息添加到 div 元素而不是调用 alert 来“提醒”用户（这对您的用户更有礼貌）。

更新

对于您的小提琴，只需制作：

alert('Wait: SMS Sending...');
return false; // return false to prevent form submission or return true to allow it

validateForm 处理程序的最后两行。更新了你的小提琴：http://jsfiddle.net/nDcUT/4/

但是，如果您查看 http://jsfiddle.net/rawvm/，您唯一需要做的就是将 form.submit 处理程序末尾的文本更改为“等待 .. SMS 发送”。

您可能还注意到，在我的演示中，我不使用内联 JavaScript 处理程序，并且我严格地将内容与表示和行为分开。

这是一个很好的实践（您可以在网络上阅读大量关于它的文章）。一个好的开始是http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/