手机号码和短信文本检查

Question

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

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

A1- 移动字段仅包含数字（无字母、无“+”或“-”、无“逗号”）。 如果字段包含任何非数字，警告“只允许数字值”，删除移动字段包含并再次关注它。

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

A3- 移动字段的数字以 7、8 或 9 开头（不允许其他起始数字，如 0 到 6）。 如果开始包含 0 到 6，警告“只允许开始时为 7、8 或 9”，删除移动字段包含并再次关注它。

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/