正则表达式不能用作HTML5模式验证器

时间:2018-02-03 17:00:45

标签: javascript regex html5 validation

我尝试验证网址是否以.png结尾:

/.[a-zA-z]\.(png)$/i

但是,当它用作pattern属性的值时似乎无法正常工作,但一切似乎都很好here (regex101.com)



<form action="#">
  <input type="url" pattern="/.[a-zA-z]\.(png)$/i" value="" required >
  <input type="submit" value="submit"/>
</form>
&#13;
&#13;
&#13;

要验证的测试字符串:

http://imgur.com/foo.png

我希望匹配o.png或最后一个正斜杠之后的所有内容,并以.png

结束

2 个答案:

答案 0 :(得分:3)

您不必将正则表达式放在正斜杠之间。

现在你的正则表达式匹配:

  • 任何字符open create_user_tabel and then write one line inside up function. Schema::defaultStringLength(191); e.g public function up() { Schema::defaultStringLength(191); Schema::create('users', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->string('email')->unique(); $table->string('password'); $table->rememberToken(); $table->timestamps(); }
  • 和大写或小写字符[a-zA-Z]
  • 一个点.
  • 捕获的群组中的点png \.

所以这会匹配一个包含2个字符然后是.png。

的网址

您可以使用^.+\.png一次或多次匹配任何字符(\.png),然后匹配行.+末尾的点png。

您可以延长\.png$以符合您的条件。

.+

答案 1 :(得分:2)

来自the docs

  

<强>图案

     

检查控件值的正则表达式。模式必须匹配整个值,而不仅仅是某个子集。使用title属性来描述帮助用户的模式。当type属性的值为text,search,tel,url,email或password时,此属性适用,否则将被忽略。正则表达式语言与JavaScript RegExp算法相同,使用'u'参数使其将模式视为一系列unicode代码点。 图案未被正斜杠包围。

<form action="#">
  <input type="text" pattern=".[a-zA-z]\.(png)$" value="" required >
  <input type="submit" value="submit"/>
</form>