JavaScript Onclick电话/电子邮件验证功能不工作_Javascript_Html

JavaScript Onclick电话/电子邮件验证功能不工作

javascript html

JavaScript Onclick电话/电子邮件验证功能不工作,javascript,html,Javascript,Html,我有一个搜索字段，我希望用户能够通过电话或电子邮件进行搜索。但是，我的onclick事件不会触发。我尝试过控制台工具，但似乎无法调试通过那里 <body> </div> <div style="text-align: center;"> {% from "_formhelpers.html" import render_field %} <form method="POST" action="/"> <

我有一个搜索字段，我希望用户能够通过电话或电子邮件进行搜索。但是，我的onclick事件不会触发。我尝试过控制台工具，但似乎无法调试通过那里

<body>  

</div>
<div style="text-align: center;">
    {% from "_formhelpers.html" import render_field %}
    <form method="POST"  action="/">
        <dl style="display:inline-block">{{render_field(form.search)}}</dl> 
        <button id="searchbutton" style="display:inline-block" type="submit"  class="btn btn-outline-success my-2 my-sm-0" onclick="doValidate()" >Search</button>

    </form>
</div>  

<script>

function validateEmail(email) { //Validates the email address
    var emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return emailRegex.test(email);
}

function validatePhone(phone) { //Validates the phone number
    var phoneRegex = /^(\+91-|\+91|0)?\d{10}$/; // Change this regex based on requirement
    return phoneRegex.test(phone);
}

function doValidate() {
   if (!validateEmail(document.appointment.requiredphone.value) || !validatePhone(document.appointment.requiredphone.value) ){
    alert("Invalid Email");
    return false;
}
}
</script>
{% endblock %}
</html>


{%来自“\u formhelpers.html”导入呈现\u字段%}
{{render_field（form.search）}
搜索
函数validateEmail（email）{//验证电子邮件地址
var emailRegex=/^（[a-zA-Z0-9\.\-]）+\@（[a-zA-Z0-9\-]）+\）+（[a-zA-Z0-9]{2,4}）+$/；
返回emailRegex.test（电子邮件）；
}
函数validatePhone（电话）{//验证电话号码
var phoneRegex=/^（\+91-\+91 | 0）？\d{10}$////根据需要更改此正则表达式
返回phoneRegex.test（电话）；
}
函数doValidate（）{
如果（！validateEmail（document.appointment.requiredphone.value）| |！validatePhone（document.appointment.requiredphone.value））{
警报（“无效电子邮件”）；
返回false；
}
}
{%endblock%}

单击按钮时，

表单

提交可能是一个问题。请尝试event.preventDefault（）以防止表单提交操作

<button id="searchbutton" style="display:inline-block" type="submit"  class="btn btn-outline-success my-2 my-sm-0" onclick="doValidate(event)" >Search</button>

function doValidate(e) {
   e.preventDefault(); // pass from button
   console.log('here');
   if (!validateEmail(document.appointment.requiredphone.value) || !validatePhone(document.appointment.requiredphone.value) ){
    alert("Invalid Email");
    return false;
}

搜索
函数doValidate（e）{
e、 preventDefault（）；//从按钮传递
console.log（'here'）；
如果（！validateEmail（document.appointment.requiredphone.value）| |！validatePhone（document.appointment.requiredphone.value））{
警报（“无效电子邮件”）；
返回false；
}

脚本在概念上是有效的，但是，由于您没有包含呈现的标记，并且可能没有包含一些相关的javascript，因此很难确定您遇到的具体问题

问题几乎肯定与代码中的javascript有关：

document.appointment.requiredphone.value

什么是

约会

？什么是

要求电话

？如果不知道HTML是如何构造的，就不可能确定确切的问题

因为您只包含了

{{render_field（form.search）}}

，而不是呈现的HTML，这是我们所能帮助的

工作片段
（使用

document.getElementById

和一些文本输入）

函数validateEmail（email）{//验证电子邮件地址
var emailRegex=/^（[a-zA-Z0-9\.\-]）+\@（[a-zA-Z0-9\-]）+\）+（[a-zA-Z0-9]{2,4}）+$/；
返回emailRegex.test（电子邮件）；
}
函数validatePhone（电话）{//验证电话号码
var phoneRegex=/^（\+91-\+91 | 0）？\d{10}$////根据需要更改此正则表达式
返回phoneRegex.test（电话）；
}
函数doValidate（）{
如果（！validateEmail（document.getElementById（'email'）.value）| |！validatePhone（document.getElementById（'password'）.value））{
警报（“无效电子邮件”）；
返回false；
}
}


搜索

你能在e.preventDefault下面做一个console.log（'here'）；inside doValidate（）来查看函数是否正在执行吗？“没有工作”不是一个明确的问题陈述。发生了什么/没有发生什么？“似乎无法在那里调试”。这应该是您解决的第一件事，这样您就可以成功地调试项目。控制台有什么不起作用？另外-请显示呈现的HTML，而不是模板语言。最后，您真的应该提供最佳帮助。您如何确定

onclick

事件没有触发？缺少lert？因为这可能与许多其他事情有关。将警报放在

if

之前。此外，您只需使用HTML的

模式

属性而不是JavaScript…谢谢…还有一件事…是否可以从一个文本（HTML）字段而不是两个文本（HTML）字段验证电话或电子邮件？