Question

如何创建URL输入表单要求输入都是有效的URL，并以特定的文件类型结束。

例如，这是我的输入：

<input name="bg" placeholder="https://website.com/image" type="url">

正如您所看到的，它正在使用URL类型，它将其限制为有效的http：//域，但我希望输入字段仅接受.png，.jpg和.gif文件。

这可以通过html或javascript实现，如果是这样，怎么做？

谢谢！

Answer 1

这里你真的不需要Javascript，你可以使用pattern属性作为你的input（例如我添加了CSS）：

input:valid {
  border: 1px solid green;
}

input:invalid {
  border: 1px solid red;
}

<input name="bg" placeholder="https://website.com/image" type="url" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)(.jpg|.png|.gif)">

Answer 2

您可以使用正则表达式实现此目的，如果用户已禁用javascript，您还需要检查此服务器端。

的Javascript

$("#imageUrl").change(function() {
    var t = $("#imageUrl").val()
    var expression = https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)(.jpg|.png|.gif);
    var regex = new RegExp(expression);
    if (t.match(regex)) {
        alert("Successful match");
    } else {
        alert("No match");
    }
});

HTML

<input id="imageUrl" name="bg" placeholder="https://website.com/image" type="url">

Answer 3

请仔细阅读以下代码，您将通过模糊文本框获得有效或无效的图片网址。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="bg" placeholder="https://website.com/image" onblur="TextBoxChange()" type="url" >
<label id="errorMsg"></label>

public function chartPie(Survey $servey)
{

    $center= $servey ->getCenter();
    $form = $servey ->getForm();
    $ob = new Highchart();
    $ob->chart->renderTo('containerpie');
   $ob->chart->type('pie');
    $ob->chart->options3d(array('enabled' => true,'alpha'=> '45','beta'=> null));
    $ob->plotOptions->pie(array( 
        'depth' => '25',
        'allowPointSelect'  => true,
        'cursor'    => 'pointer',
        'dataLabels'    => array('enabled' => true , 'format'=> '{point.name}'),
        'showInLegend'  => true
    ));



    $ob->title->text('Emploee');



    $data = array(
        array('Engineer', $form->getNbEngineer()),
        array('Agents ', $form->getNbAgents ()),
        array('Technicien', $form->getNbTechnicien()),
        array(‘Laborer’,$form->getNbLaborer ())
);

    $ob->series(array(array('type' => 'pie','name' => 'Browser', 'data' => $data)));
    return $ob;
}

HTML输入：要求URL以特定文件类型结束

3 个答案: