Question

我创建了一个警告框，它将从表单中输出详细信息，我现在想知道如何启动Java验证部分，以便填写表单时正确显示表单详细信息的警告框，但是如果错误则指示用户填写无效框。

HTML

 <form id="foo" onsubmit="formAlert(); return false;" method="POST">
    <p><label for="first_name">First Name<label><input type="text" id="first_name" value="" /></p>
    <p><label for="last_name">Last Name<label><input type="text" id="last_name" value="" /></p>
     <p><label for="Phone_num">Phone Number<label><input type="number" id="phone_num" value="" /></p>


    <p><input type="submit" value="click me" onclick=""/></p>
</form>

Java脚本

 function formAlert() {
alert_string = '';
var userName = document.getElementById('first_name').value;
var userLastName = document.getElementById('last_name').value;
 var phoneno =  document.getElementById('phone_num').value;
if(userName === "" || userName === null){
  alert("Please enter name");
}
if(userLastName === "" || userLastName === null){
  alert("Please enter lastname");
}

否则if（phoneno ===“/ ^（？（[0-9] {3}））？[ - 。]？（[0-9] {3}）[ - 。]？（[0 -9] {4}）$ /;“|| phoneno === null）{ 提醒（“请输入电话号码”）; }

else{
 alert_string += userName + " ";
 alert_string += userLastName;
 alert_string += phoneno;
 alert(alert_string);

} }

Answer 1

这是一个快速而简单的解决方案。将其添加到您的JavaScript代码中。希望它有所帮助！

<input type="email" name="email" required>

检查电子邮件是否需要简单使用。像这样：

#! /usr/bin/env python
# -*- coding: utf-8 -*-

from io import BytesIO
import matplotlib.patches as mpatches
import matplotlib.pyplot as plt
import xml.etree.ElementTree as ET

ET.register_namespace("", "http://www.w3.org/2000/svg")

fig = plt.figure(figsize=(25,10))
fig, ax1 = plt.subplots()

ax1.add_patch(mpatches.FancyBboxPatch((1980, 1), 1, 1, boxstyle=mpatches.BoxStyle("Round", pad=0.15)))
ax1.annotate('One', xy=(1980, 1), xytext=(0, 0), textcoords='offset points', color='w', ha='center', fontsize=8, bbox=dict(boxstyle='round, pad=.5', fc=(.1, .1, .1, .92), ec=(1., 1., 1.), lw=1, zorder=1))

ax1.add_patch(mpatches.FancyBboxPatch((1990, 2), 1, 1, boxstyle=mpatches.BoxStyle("Round", pad=0.15)))
ax1.annotate('Two', xy=(1990, 2), xytext=(0, 0), textcoords='offset points', color='w', ha='center', fontsize=8, bbox=dict(boxstyle='round, pad=.5', fc=(.1, .1, .1, .92), ec=(1., 1., 1.), lw=1, zorder=1))

ax1.add_patch(mpatches.FancyBboxPatch((2000, 3), 1, 1, boxstyle=mpatches.BoxStyle("Round", pad=0.15)))
ax1.annotate('Three', xy=(2000, 3), xytext=(0, 0), textcoords='offset points', color='w', ha='center', fontsize=8, bbox=dict(boxstyle='round, pad=.5', fc=(.1, .1, .1, .92), ec=(1., 1., 1.), lw=1, zorder=1))

ax1.add_patch(mpatches.FancyBboxPatch((2010, 4), 1, 1, boxstyle=mpatches.BoxStyle("Round", pad=0.15)))
ax1.annotate('Four', xy=(2010, 4), xytext=(0, 0), textcoords='offset points', color='w', ha='center', fontsize=8, bbox=dict(boxstyle='round, pad=.5', fc=(.1, .1, .1, .92), ec=(1., 1., 1.), lw=1, zorder=1))

# Save the figure in a fake file object
ax1.set_xlim(1970, 2017)
ax1.set_ylim(0, 8)

# Set id for the patches
for i, t in enumerate(ax1.patches):
    t.set_gid('patch_%d' % i)

# Set id for the annotations
for i, t in enumerate(ax1.texts):
    t.set_gid('tooltip_%d' % i)

f = BytesIO()
plt.savefig(f, format="svg")

# --- Add interactivity ---

# Create XML tree from the SVG file.
tree, xmlid = ET.XMLID(f.getvalue())
tree.set('onload', 'init(evt)')

# Hide the tooltips
for i, t in enumerate(ax1.texts):
    el = xmlid['tooltip_%d' % i]
    el.set('visibility', 'hidden')

# Assign onmouseover and onmouseout callbacks to patches.
for i, t in enumerate(ax1.patches):
    el = xmlid['patch_%d' % i]
    el.set('onmouseover', "ShowTooltip(this)")
    el.set('onmouseout', "HideTooltip(this)")

# This is the script defining the ShowTooltip and HideTooltip functions.
script = """
    <script type="text/ecmascript">
    <![CDATA[

    function init(evt) {
        if ( window.svgDocument == null ) {
            svgDocument = evt.target.ownerDocument;
            }
        }

    function ShowTooltip(obj) {
        var cur = obj.id.slice(-1);

        var tip = svgDocument.getElementById('tooltip_' + cur);
        tip.setAttribute('visibility',"visible")
        }

    function HideTooltip(obj) {
        var cur = obj.id.slice(-1);
        var tip = svgDocument.getElementById('tooltip_' + cur);
        tip.setAttribute('visibility',"hidden")
        }

    ]]>
    </script>
    """

# Insert the script at the top of the file and save it.
tree.insert(0, ET.XML(script))
ET.ElementTree(tree).write('svg_tooltip_1.svg')

验证电话号码的方法有很多种。这是一个很好的例子：信用证：https://stackoverflow.com/a/18376246/4084160

Answer 2

还有其他方法可以做到这一点。如果你有很多输入，这是一个很好的方法

<html>

<style>
.required 
{
    border: 1px solid #F00;
    padding: 2px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="foo" onsubmit="formAlert(); return false;" method="POST">
        <p><label for="first_name">First Name<label><input                    type="text" id="first_name" value="" /></p>
        <p><label for="last_name">Last Name<label><input type="text"          id="last_name" value="" /></p>

        <p><input type="submit" value="click me" onclick=""/></p>
    </form>

    <div id="msgRequired" style="display: none;">
    <p>required Field!</p>
    </div>

<script>    

function formAlert() {
        alert_string = '';
        var cont = 0;
         $("#foo input").not(':hidden').each(function () {
        if ($(this).val() == "") {
            $(this).addClass("required");
            cont++;
        }
        else
        {
            $(this).removeClass("required");
        }
    });
        if(cont == 0)
        {

        alert_string = alert_string + document.getElementById('first_name').value;
        alert_string = alert_string + ' ';
        alert_string = alert_string + document.getElementById('last_name').value;

        alert(alert_string);
        $("#msgRequired").hide();
        }
        else
        {
        $("#msgRequired").show();
        }

       }
</script>   

</html>

Java表单验证对于我的网站

2 个答案: